JavaScript实现x秒后自动跳转到一个页面


Posted in Javascript onJanuary 03, 2013

今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种:
1、用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转;
2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码:

<script language="JavaScript1.2" type="text/javascript"> 
<!-- 
// Place this in the 'head' section of your page. 
function delayURL(url, time) { 
setTimeout("top.location.href='" + url + "'", time); 
} 
//--> 
</script> 
<!-- Place this in the 'body' section --> 
<a href="javascript:" onClick="delayURL('myPage.html','2000')">My Delayed Link</a>

将此代码修改为:
<script language="JavaScript1.2" type="text/javascript"> 
function delayURL(url, time) { 
setTimeout("top.location.href='" + url + "'", time); 
} 
</script> 
<span id="time" style="background: red">3</span> 
秒钟之后自动跳转,如果不跳转,请点击下面链接 
<a href="目标页面.jsp">目标页面</a> 
<script type="text/javascript"> 
delayURL("http://www.hualai.net.cn", 3000); 
</script>

然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化,比如说设定3秒,然后随着时间的变化3变成2再变成1直至跳转,下面请看第三种方法。
3、把方法2中的代码修改为:
<script language="JavaScript1.2" type="text/javascript"> 
function delayURL(url) { 
var delay=document.getElementById("time").innerHTML; 
//最后的innerHTML不能丢,否则delay为一个对象 
if(delay>0){ 
delay--; 
document.getElementById("time").innerHTML=delay; 
}else{ 
window.top.location.href=url; 
} 
setTimeout("delayURL('" + url + "')", 1000); 
//此处1000毫秒即每一秒跳转一次 
} 
</script> 
<span id="time" style="background: red">3</span> 
秒钟之后自动跳转,如果不跳转,请点击下面链接 
<a href="目标页面.jsp">主题列表</a> 
<script type="text/javascript"> 
delayURL("http://www.hualai.net.cn/news/knowledge/265.html"); 
</script>

此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒(这个3会递减到0)后跳转到目标页面。
Javascript 相关文章推荐
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JavaScript如何实现图片处理与合成
May 29 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Javascript 判断是否存在函数的方法
Jan 03 #Javascript
JavaScript中“基本类型”之争小结
Jan 03 #Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 #Javascript
javascript学习(二)javascript常见问题总结
Jan 02 #Javascript
javascript学习(一)构建自己的JS库
Jan 02 #Javascript
jQuery常见开发技巧详细整理
Jan 02 #Javascript
js显示时间 js显示最后修改时间
Jan 02 #Javascript
You might like
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
有关php运算符的知识大全
2011/11/03 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
接收键盘指令的脚本
2006/06/26 Javascript
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python中set常用操作汇总
2016/06/30 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python判断有效的数独算法示例
2019/02/23 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
《童年的发现》教学反思
2014/02/14 职场文书
企业党员一句话承诺
2014/05/30 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书