标签：
效果图：
页面代码
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行出错:
TypeError: null is not an object (evaluating ‘document.getElementById("time").innerHTML‘)
原因是HTML代码在页面载入是顺序执行（函数在被调用时才执行），当执行到：
1 var num=document.getElementById("time").innerHTML;
id为"time"的span标签的内容并未加载，所以提示说返回值为空。
如果选择脚本代码在html代码之前，则需要将这条语句写到函数体内。
*javascirpt函数在页面加载时自动执行的方法：
方法一：
1 <script type="text/javascript"> 2 function load(){ 3 alert(‘hello‘); 4 } 5 </script> 6 7 <body onload="load()">
方法二：
1 <script> 2 window.onload = function(){ 3 alert("hello"); 4 } 5 </script> 6 7 <body>
标签：
原文地址：http://www.cnblogs.com/wx1993/p/4640866.html
