JS实现操作成功定时回到主页效果
转载声明：
本文为摘录自“博客园”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2020-09-13 18:29:43
效果图：
页面代码
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>
