JS實現操做成功定時回到主頁效果

時間 2019-12-09

原文原文鏈接

效果圖：javascript

頁面代碼html

 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代碼的順序執行性）java

若是腳本代碼的位置放在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代碼在頁面載入是順序執行（函數在被調用時才執行），當執行到：lua

1 var num=document.getElementById("time").innerHTML;

id爲"time"的span標籤的內容並未加載，因此提示說返回值爲空。spa

若是選擇腳本代碼在html代碼以前，則須要將這條語句寫到函數體內。code

*javascirpt函數在頁面加載時自動執行的方法：htm

方法一：
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。