效果图：

页面代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>home</title>
 </head>

 <body>
   <!-- 页面文字 -->
   <h1>操作成功</h1>
   <span id="time">5</span>
   <span>秒后回到主页</span>
   <a href="back()">返回</a>  <!-- 也可以写成javascipt：back(); -->
 </body>
 </html>

 <script type="text/javascript">
   //获取要定时元素的值
   var num=document.getElementById("time").innerHTML;
   //定时函数
   function count(){
     num--;
     document.getElementById("time").innerHTML=num;
     if(num==0){
       window.location="http://www.imooc.com"; //时间到点则跳转到指定页面
     }
   }
   setInterval("count()", 1000);   //调用定时方法
   function back(){                //返回前一页面的方法
     window.history.back();        //同window.history.go(-1);
   }
 </script>

要注意的问题（html代码的顺序执行性）

如果脚本代码的位置放在html代码的前面，如下:

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>home</title>
 </head>
 <script type="text/javascript">
   //获取要定时元素的值
   var num=document.getElementById("time").innerHTML;
   //定时函数
   function count(){
     num--;
     document.getElementById("time").innerHTML=num;
     if(num==0){
       window.location="http://www.imooc.com"; //时间到点则跳转到指定页面
     }
   }
   setInterval("count()", 1000);   //调用定时方法
   function back(){                //返回前一页面的方法
     window.history.back();        //同window.history.go(-1);
   }
 </script>
 <body>
   <h1>操作成功</h1>
   <span id="time">5</span>
   <span>秒后回到主页</span>
   <a href="back()">返回</a>
 </body>
 </html>

浏览器中运行代码则会出错，显示第9行出错:

TypeError: null is not an object (evaluating 'document.getElementById("time").innerHTML')

原因是HTML代码在页面载入是顺序执行（函数在被调用时才执行），当执行到：

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

id为"time"的span标签的内容并未加载，所以提示说返回值为空。

如果选择脚本代码在html代码之前，则需要将这条语句写到函数体内。

*javascirpt函数在页面加载时自动执行的方法：

方法一：1 <script type="text/javascript">
 function load(){
 alert('hello');
 }
 </script>

 <body onload="load()">
方法二：1 <script>
 window.onload = function(){
     alert("hello");
 }
 </script>

 <body>

JS实现操作成功定时回到主页效果的更多相关文章

  1. js 表格操作 全选和反选效果 案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  3. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  5. 在Node.js中操作文件系统(一)

    在Node.js中操作文件系统 在Node.js中,使用fs模块来实现所有有关文件及目录的创建,写入及删除操作.在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.比如在执行读文件操作 ...

  6. 执行插件的替代方式：用JS调用操作

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复229或者20161028可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  7. Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题

    调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下:    [shenma@localhost demo]$ ls v ...

  8. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery实现"跳到底部"，"回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ZOJ2588 Burning Bridges（割边模板）

    题目要输出一个无向图的所有割边.用Tarjan算法: 一遍DFS,构造出一颗深度优先生成树,在原无向图中边分成了两种:树边(生成树上的边)和反祖边(非生成树上的边). 顺便求出每个结点的DFS序dfn ...

  2. POJ1523 SPF（割点模板）

    题目求一个无向图的所有割点,并输出删除这些割点后形成几个连通分量.用Tarjan算法: 一遍DFS,构造出一颗深度优先生成树,在原无向图中边分成了两种:树边(生成树上的边)和反祖边(非生成树上的边). ...

  3. FZU2215 Simple Polynomial Problem（中缀表达求值）

    比赛时没做出这题太可惜了. 赛后才反应过来这就是个中缀表达式求值,数字栈存的不是数字而是多项式. 而且,中缀表达式求值很水的,几行就可以搞定. #include<cstdio> #incl ...

  4. 【python游戏编程之旅】第三篇---pygame事件与设备轮询

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 在上一篇博客中,我们学习了pygame中的IO.数据http://www.cnblogs.com/msxh/ ...

  5. 解决javax.imageio.IIOException: Can't create output stream!

    解决javax.imageio.IIOException: Can't create output stream! javax.imageio.ImageIO.write(image, "J ...

  6. NSJSONSerialization介绍

      ios5中apple增加了解析JSON的api——NSJSONSerialization.网上已经有人做过测试,NSJSONSerialization在效率上完胜SBJSON.TouchJSON. ...

  7. QComboBox 和 QSpinBox 使用方法

    Qt中QComboBox 和 QSpinBox 是两个很常用的空间,QComboBox 是下拉菜单,而 QSpinBox 是调参数的神器,所以它们的用法十分必要熟练掌握. 首先来看 QComboBox ...

  8. DTD约束的校验工具安装及检验（Iexmltls工具）

    通过打开我们写的dtd约束文档,我们可以看到,在我们不按规定的格式打开xml时并不能检验出错误.此时我们可以借助软件来帮助我们校验. Iexmltls是一个在IE浏览器下安装的用于检验xml约束是否正 ...

  9. IP地址在数据库里面的存储方式

    大多数公司的表结构都需要经过DBA进行审核,有时候你会看到存储IP地址采用varchar(15),这种方式都是传统的做法,这种方法需要占用15个字节,那么有更省空间的做法么?肯定是有的,那就是用int ...

  10. Laptop Issue Letter (读取Excel中指定内容,然后生成新的Excel文件)

    $xl = New-Object -ComObject "Excel.Application" $cmdbwb = $xl.Workbooks.Open("F:\Ivan ...