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/ ...
随机推荐
- Codeforces Round #203 (Div. 2) A.TL
#include <iostream> #include <algorithm> using namespace std; int main(){ int n,m; cin & ...
- TYVJ P1078 删数 Label:区间dp
描述 有N个不同的正整数数x1, x2, ... xN 排成一排,我们可以从左边或右边去掉连续的i个数(只能从两边删除数),1<=i<=n,剩下N-i个数,再把剩下的数按以上操作处理,直到 ...
- COJ1013 ： WZJ的数据结构（十三）
这道题有这样一个解法: 首先把边依次加到图中,若当前这条边与图中的边形成了环,那么把这个环中最早加进来的边弹出去并将每条边把哪条边弹了出去记录下来:ntr[i] = j,特别地,要是没有弹出边,ntr ...
- Android之adb异常
Android使用adb模拟器时出现"unable to establish connection to adb"."ADB server didn't ACK" ...
- FFMPEG解码流程
FFMPEG解码流程: 1. 注册所有容器格式和CODEC: av_register_all() 2. 打开文件: av_open_input_file() 3. 从文件中提取流信息: av_f ...
- Qt5.4 VS2010 Additional Dependancies
Go to Linker -> General -> Additional LIbrary Directories: qtmaind.libQt5Cored.libQt5Guid.libQ ...
- float塌陷有关问题
程序代码需要用到的CSS样式body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif; f ...
- hdu Bone Collector
入门级动态规划 #include"iostream" #include"string.h" #include"stdio.h" using ...
- 2015寒假ACM训练计划
1月26号至3月4号 每天给自己一个计划.做有意义的事情,不要浪费时间. 8:00——11:30 acm训练 11:30——13:00 午休 13:00——17:30 acm训练 17:30——18 ...
- cmd命令行查看windows版本
1.ver命令不显示sp几 C:\>ver Microsoft Windows XP [Version 5.1.2600] C:\> 08: C:\Users\Administrator& ...