各种页面定时跳转(倒计时跳转)代码总结_javascript技巧

下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下:

(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内)

复制代码 代码如下:

<script type="text/javascript">
//3秒钟之后跳转到指定的页面
setTimeout(window.location.href='http://www.baidu.com',3);
</script>

(2)html代码实现,在页面的head区域块内加上如下代码

复制代码 代码如下:

<!--5秒钟后跳转到指定的页面-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

(3)稍微复杂点,多见于登陆之后的定时跳转

复制代码 代码如下:

<!doctype html>
<head>
<meta charset=utf-8" />
<title>js定时跳转页面的方法</title>
</head>
<body>
<script>
var t=10;//设定跳转的时间
setInterval("refer()",1000); //启动1秒定时
function refer(){
if(t==0){
location="http://www.baidu.com"; //#设定跳转的链接地址
}
document.getElementById('show').innerHTML=""+t+"秒后跳转到百度"; // 显示倒计时
t--; // 计数器递减
//本文转自:
}
</script>
<span id="show"></span>
</body>
</html>

时间: 2024-09-15 22:42:55

各种页面定时跳转(倒计时跳转)代码总结_javascript技巧的相关文章

刷新页面的几种方法小结(JS,ASP.NET)_javascript技巧

Javascript刷新页面的几种方法: 1. history.go(0) 2. location.reload() 3. location=location 4. location.assign(location) 5. document.execCommand('Refresh') 6. window.navigate(location) 7. location.replace(location) 8. document.URL=location.href 自动刷新页面的方法: 1.页面自动

JS倒计时代码汇总_javascript技巧

本文实例总结了常见的JS倒计时代码.分享给大家供大家参考.具体汇总如下: 第一种:精确到秒的javascript倒计时代码  HTML代码:  复制代码 代码如下: <form name="form1">  <div align="center" align="center">  <center>离2010年还有:<br>  <input type="textarea" n

JS实现可调整倒计时间代码分享_javascript技巧

这是一款基于javascript实现可调整倒计时间的代码,我们可以手动调整倒计时间,可以精确到"天.时.分.秒",而且样式布局也很新颖. 先上运行效果图: 效果演示     源码下载 为大家分享的可调整倒计时间的JS代码如下(浏览器中如果不能正常运行,可以尝试切换浏览模式). <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

JS实现页面跳转参数不丢失的方法_javascript技巧

本文实例讲述了JS实现页面跳转参数不丢失的方法.分享给大家供大家参考,具体如下: 需求:页面编辑后,返回列表页面,参数不丢失,能够记住页数以及筛选条件. 我坚信,不管白猫黑猫,能捉到耗子的就是好猫,当然如果能够高效的,简单的处理最好. 我的思路就是,把列表页面地址作为参数传递过去. 这里就会面临一个问题,url本身就是由多个参数组成的,这样纯粹的传递,就会出问题,参数丢失. 所以要对url进行加密. escape().encodeURI().encodeURIComponent() JavaSc

js实现页面跳转的几种方法小结_javascript技巧

按钮式: <INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.jb51.net/'"> 链接式: <a href="javascript:history.go(-1)">返回上一步</a> <a href="<%=Request.ServerV

JavaScript实现页面跳转的几种常用方式_javascript技巧

本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

js实现页面跳转的五种方法推荐_javascript技巧

js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

Javascript实现页面跳转的几种方式分享_javascript技巧

第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript">window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript">alert(&q

js页面跳转常用的几种方式_javascript技巧

第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="jb51.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript"> alert(&