JS实现操作成功定时回到主页效果
效果图:
页面代码
<!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实现操作成功定时回到主页效果的更多相关文章
- js 表格操作 全选和反选效果 案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 在Node.js中操作文件系统(一)
在Node.js中操作文件系统 在Node.js中,使用fs模块来实现所有有关文件及目录的创建,写入及删除操作.在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.比如在执行读文件操作 ...
- 执行插件的替代方式:用JS调用操作
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复229或者20161028可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题
调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下: [shenma@localhost demo]$ ls v ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现"跳到底部","回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- BZOJ3755 : Pty爬山
l[i],r[i]表示站在i点往左往右走能看到的最高峰,用栈维护凸壳求出 h[i]表示i点能看到的最高峰的高度 a[i],b[i]表示i点往左往右走时反悔的点,即第一个h[j]>h[i]的j,用 ...
- ios 开发中出现的 pointer being freed was not allocated *** set a breakpoint in malloc_error_break to debug
主要原因是某部分内存释放的太频繁,解决方法是检查函数的中[xxx release]; 将其注释掉 就行了
- TYVJ P1016 装箱问题 Label:01背包 DP
做题记录:2016-08-15 23:07:04 背景 太原成成中学第2次模拟赛 第三道 描述 有一个箱子容量为v(正整数,o≤v≤20000),同时有n个物品(o≤n≤30),每个物品有一个体积 ( ...
- POJ 2486 Apple Tree(树形DP)
题目链接 树形DP很弱啊,开始看题,觉得貌似挺简单的,然后发现貌似还可以往回走...然后就不知道怎么做了... 看看了题解http://www.cnblogs.com/wuyiqi/archive/2 ...
- 深度解析开发项目之 05 - 解决textField编辑之后点击其他内容改变的问题
深度解析开发项目之 05 - 解决textField编辑之后点击其他内容改变的问题 问题的解决: 只需要给HeadeVIew加上这句代码
- jQuery 事件的命名空间
在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间.事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释.但手册也仅仅是一句话就带 过去了.没有过多的深究,或许他认为命名 ...
- java 遍历文件夹里的文件
Java遍历文件夹的2种方法: A.不使用递归: import java.io.File; import java.util.LinkedList; public class FileSystem { ...
- obout editor Absolute path for uploaded image
本文转自:https://www.obout.com/editor_new/KnowledgeBase.aspx?id=706 Absolute path for uploaded image Q ...
- #在FLAT模式下,需要设置flat子网,VM的IP从这个设置的子网中抓取,这时flat_injected需要设置为True,系统才能自动获得IP,如果flat
#在FLAT模式下,需要设置flat子网,VM的IP从这个设置的子网中抓取,这时flat_injected需要设置为True,系统才能自动获得IP,如果flat子网和主机网络是同一网络,网络管理员要注 ...
- linux下IPTABLES配置
如果你的IPTABLES基础知识还不了解,建议先去看看. 开始配置 我们来配置一个filter表的防火墙. (1)查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables - ...