JavaScript实现倒计时跳转页面功能【实用】

这里给大家提供一个好用的JS写的倒计时页面，就像一些网站上点提交后出现的倒计时页面类似。

页面代码简单，直接拷贝就能运行，页面可以自己美化下。

<!--这里定义倒计时开始数值-->
<span id="totalSecond">5</span>
<!--定义js变量及方法-->
<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1)
{
second = document.getElementById('totalSecond').innerText;
} else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect()
{
if (second < 0)
{
 <!--定义倒计时后跳转页面-->
location.href = 'default.aspx';
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 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

  • 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实现倒计时跳转页面

    很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下: <script type="text/javascript"> var t=10; setInterval("refer()",1000); function refer(){ if(t==0){ location.href="http://www.jb51.net"; } docume

  • 在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实现倒计时跳转页面功能【实用】

    这里给大家提供一个好用的JS写的倒计时页面,就像一些网站上点提交后出现的倒计时页面类似. 页面代码简单,直接拷贝就能运行,页面可以自己美化下. <!--这里定义倒计时开始数值--> <span id="totalSecond">5</span> <!--定义js变量及方法--> <script language="javascript" type="text/javascript"> v

  • js实现浏览器倒计时跳转页面效果

    js实现浏览器倒计时跳转页面效果

    本文实例为大家分享了js浏览器倒计时跳转页面效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta http-equiv="Content-Type" content="text/html; charset=gb123"/> </head> <body> <H4>

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • Android实现倒计时结束后跳转页面功能

    Android实现倒计时结束后跳转页面功能

    前言 在开发中会经常用到倒计时这个功能,关于倒计时的实现,有疑问的朋友们可以参考这篇:http://www.jb51.net/article/101807.htm 本文主要给大家介绍了关于Android倒计时结束跳转页面的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例代码 1.layout中新建两个xml文件,在src下的包中新建两个类,MainActivity和MainActivity2并分别指向两个xml文件,在MainActivity的指向的xml文件建一

  • iOS启动页倒计时跳过按钮功能

    iOS启动页倒计时跳过按钮功能

    WSDrawCircleProgress, 根据UIBezierPath和CAShapeLayer自定义倒计时进度条,适用于app启动的时候设置一个倒计时关闭启动页面.可以设置进度条颜色,填充颜色,进度条宽度以及点击事件等. 公共方法: //set track color @property (nonatomic,strong)UIColor *trackColor; //set progress color @property (nonatomic,strong)UIColor *progre

  • JavaScript实现自动跳转文本功能

    贴一段自动跳转文本的代码实现: 实现代码: <html> <head> <title>文本跳转</title> <style type=text/css> body{ MARGIN-TOP: 10px; FONT-SIZE: 10pt; MARGIN-LEFT: 10px; MARGIN-RIGHT: 0px; FONT-FAMILY: "微软雅黑" } </style> <meta http-equiv=C

  • 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" &

随机推荐