首页 > 代码库 > JS实现操作成功定时回到主页效果

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="http://www.mamicode.com/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="http://www.mamicode.com/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 onl oad="load()">
技术分享
技术分享
方法二:
1 <script> 2 window.onload = function(){ 3 alert("hello"); 4 } 5 </script> 6 7 <body>
技术分享

 

JS实现操作成功定时回到主页效果