javascript实现倒计时跳转页面
很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下:
<script type="text/javascript"> var t=10; setInterval("refer()",1000); function refer(){ if(t==0){ location.href="http://www.jb51.net"; } document.getElementById('show').innerHTML=""+t+"秒后跳转到我们"; t--; } </script> <span id="show"></span>
以上代码实现了我们想要的效果,能够在10秒之后跳转到指定页面,下面介绍一下实现过程。
一.实现原理:
原理非常的简单,就是利用setInterval()定时器函数,每秒执行一次refer()函数,此函数能够没执行一次将t减1,同时将当前的t的值写入div中,如果t减到0,也就是倒计时完毕,就跳转到指定页面。原理大致如此。
二.相关阅读:
1.setInterval()函数可以参阅setInterval()函数用法详解一章节。
2.location.href可以参阅Location对象的href属性一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
下面给大家分享2个简单的跳转代码,做一下总结,各种定时跳转代码记录如下:
(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内)
<script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.jb51.net',3); </script>
(2)html代码实现,在页面的head区域块内加上如下代码
<!--5秒钟后跳转到指定的页面--> <meta http-equiv="refresh" content="5;url=http://www.jb51.net" />
相关推荐
-
JS在一定时间内跳转页面及各种刷新页面的实现方法
1.js 代码: <SCRIPT LANGUAGE="JavaScript"> var time = 5; //时间,秒 var timelong = 0; function diplaytime(){ //时间递减 document.all.his.innerHTML = time -timelong ; timelong ++; } function redirect(){ //跳转页 //history.back(); window.location.href=&qu
-
在JS中a标签加入单击事件屏蔽href跳转页面
我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"
-
JavaScript中通过提示框跳转页面的方法
通过提示框跳转页面具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-"> <title>Document</title> </head> <body> <script> window.onload = function(){ //设置当页面加载时执行 var btn =do
-
jQuery动态修改超链接地址的方法
本文实例讲述了jQuery动态修改超链接地址的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: <a id="jb51" href="http://www.haotu.net">好图网</a> 通过jQuery更换此超级链接的链接地址为http://www.jb51.net,代码如下: $("button").click(function(){ $("#jb51").attr(&quo
-
jquery获取链接地址和跳转详解(推荐)
一.获取地址栏参数的方法 获取地址栏参数的方法 <script type="text/javascript"> (function ($) { $.getUrlParam = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).matc
-
JavaScript实现单击下拉框选择直接跳转页面的方法
本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
-
JavaScript实现倒计时跳转页面功能【实用】
这里给大家提供一个好用的JS写的倒计时页面,就像一些网站上点提交后出现的倒计时页面类似. 页面代码简单,直接拷贝就能运行,页面可以自己美化下. <!--这里定义倒计时开始数值--> <span id="totalSecond">5</span> <!--定义js变量及方法--> <script language="javascript" type="text/javascript"> v
-
javascript实现倒计时跳转页面
很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下: <script type="text/javascript"> var t=10; setInterval("refer()",1000); function refer(){ if(t==0){ location.href="http://www.jb51.net"; } docume
-
js实现浏览器倒计时跳转页面效果
本文实例为大家分享了js浏览器倒计时跳转页面效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta http-equiv="Content-Type" content="text/html; charset=gb123"/> </head> <body> <H4>
-
javascript showModalDialog 内跳转页面的问题
查看了一下代码,发现跳转链接中使用的是location,而直接使用A生成的链接,在点击跳转时,却不会弹出新的页面. 解决: 通过JS脚本,来模拟点击了A这样的链接,而不使用location试了一下: 复制代码 代码如下: function go_link(url) { var link = document.createElement("a"); link.href = url; document.body.appendChild(link); link.click(); } 在调用l
-
Javascript实现倒计时(防页面刷新)实例
话不多说,请看实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q
-
asp.net中倒计时自动跳转页面的实现方法(使用javascript)
首先,先建立一个用于跳转的页面,代码如下. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginTiao.aspx.cs" Inherits="LoginTiao" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
JavaScript实现时间倒计时跳转(推荐)
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
各种页面定时跳转(倒计时跳转)代码总结
下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 复制代码 代码如下: <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.baidu.com',3); </script> (2)html代码实现,在页面的head区域块内加
-
基于JavaScript实现定时跳转到指定页面
在某些场景下,需要网页在指定的时间后,网页能够自动跳转到指定页面,比如在无法找到指定网页的情况下,就会显示之前设置好的404页面,并且跳转到指定的页面,下面就是一段代码实现了此效果. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&q
随机推荐
- Python装饰器使用实例:验证参数合法性
- 分享Oracle 11G Client 客户端安装步骤(图文详解)
- Python开发之快速搭建自动回复微信公众号功能
- 充分利用ASP.NET的三种缓存提高站点性能的注意方法
- 一步步做自己的webinstall安装包
- 深入php list()函数的详解
- PHP XML操作类DOMDocument
- 操作XML文档遇到的XMLNS问题及解决方法 (C# 和 PHP)
- 调用WordPress函数统计文章访问量及PHP原生计数器的实现
- 关于在php.ini中添加extension=php_mysqli.dll指令的说明
- Python 获取新浪微博的最新公共微博实例分享
- JavaScript中字符串拼接的基本方法
- JavaScript中const、var和let区别浅析
- Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
- python3.3实现乘法表示例
- 让低版本浏览器支持input的placeholder属性(js方法)
- javascript性能优化之DOM交互操作实例分析
- C#生成随机数的方法小结
- PHP实现清除wordpress里恶意代码
- 查找CiscoWorks故障