JS实现操作成功定时回到主页效果
Posted 张宇航
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现操作成功定时回到主页效果相关的知识，希望对你有一定的参考价值。
效果图：
页面代码
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实现操作成功定时回到主页效果的主要内容，如果未能解决你的问题，请参考以下文章