效果图：
页面代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>home</title> 6 </head> 7 8 <body> 9 <!-- 页面文字 -->10 <h1>操作成功</h1>11 <span id="time">5</span>12 <span>秒后回到主页</span>13 <a href="back()">返回</a> <!-- 也可以写成javascipt：back(); -->14 </body>15 </html>16 17 <script type="text/javascript">18 //获取要定时元素的值19 var num=document.getElementById("time").innerHTML;20 //定时函数21 function count(){22 num--;23 document.getElementById("time").innerHTML=num;24 if(num==0){25 window.location="http://www.imooc.com"; //时间到点则跳转到指定页面26 }27 }28 setInterval("count()", 1000); //调用定时方法29 function back(){ //返回前一页面的方法30 window.history.back(); //同window.history.go(-1);31 }32 </script>
要注意的问题（html代码的顺序执行性）
如果脚本代码的位置放在html代码的前面，如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>home</title> 6 </head> 7 <script type="text/javascript"> 8 //获取要定时元素的值 9 var num=document.getElementById("time").innerHTML;10 //定时函数11 function count(){12 num--;13 document.getElementById("time").innerHTML=num;14 if(num==0){15 window.location="http://www.imooc.com"; //时间到点则跳转到指定页面16 }17 }18 setInterval("count()", 1000); //调用定时方法19 function back(){ //返回前一页面的方法20 window.history.back(); //同window.history.go(-1);21 }22 </script>23 <body>24 <h1>操作成功</h1>25 <span id="time">5</span>26 <span>秒后回到主页</span>27 <a href="back()">返回</a> 28 </body>29 </html>
浏览器中运行代码则会出错，显示第9行出错:
| 1 | TypeError: null is not an object (evaluating 'document.getElementById("time").innerHTML') |
原因是HTML代码在页面载入是顺序执行（函数在被调用时才执行），当执行到：
1 var num=document.getElementById("time").innerHTML;id为"time"的span标签的内容并未加载，所以提示说返回值为空。
如果选择脚本代码在html代码之前，则需要将这条语句写到函数体内。
*javascirpt函数在页面加载时自动执行的方法：
<script type="text/javascript"> load(){ alert('hello'); } </script> <body onload="load()">
方法二：
1 <script>2 window.onload = function(){3 alert("hello");4 }5 </script>6 7 <body>
