JS實現操作成功定時回到主頁效果
阿新 • • 發佈：2017-05-18
div www char ext 原因 元素 not img javascipt 
效果圖：
頁面代碼
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函數在頁面加載時自動執行的方法：
方法一：
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>
JS實現操作成功定時回到主頁效果