Javascript倒计时页面跳转实例小结


Posted in Javascript onSeptember 11, 2013

例1:

<script type="text/javascript" language="JavaScript">    var startTime = new Date();
    var endTime=startTime.getTime()+10*60*1000;
    var g_blinkswitch = 0;
    var g_blinktitle = document.title;
    function getRemainTime(){
        var nowTime = new Date();
        var nMS =endTime - nowTime.getTime();
        var nM=Math.floor(nMS/(1000*60)) % 60;
        var nS=Math.floor(nMS/1000) % 60;
        if(nM==0&&nS==0&&nMS<1000) //当倒计时结束
        {
            window.focus();
            setInterval("blinkNewMsg()", 1000);
            window.location.reload();
        }
        if(nS < 10) nS = "0" + nS;
        if(nMS >= 0){
            document.getElementById("remainTime").innerHTML= nM + "分" + nS + "秒";
            setTimeout("getRemainTime()",1000);
        }        
    }    
    function blinkNewMsg()
    {
        document.title = g_blinkswitch % 2==0 ? "【
 】 - " + g_blinktitle : "【新消息】 - " +
        g_blinktitle;
        g_blinkswitch++;
    }    
 window.onload=getRemainTime;
</script>
<strong id="remainTime">10分00秒</strong>
 

例2

倒计时跳转页面

<title>JS倒计时网页自动跳转代码</title>   
<script language="JavaScript" type="text/javascript">
 function delayURL(url) {
  var delay = document.getElementById("time").innerHTML;
  if(delay > 0) {
   delay--;
   document.getElementById("time").innerHTML = delay;
  } else {
   window.top.location.href = url;
  }
  setTimeout("delayURL('" + url + "')", 1000);
 }
</script>
<span id="time" style="background: #00BFFF">3</span>秒钟后自动跳转,如果不跳转,请点击下面的链接<a href="https://3water.com">我的百度</a>
<script type="text/javascript">
delayURL("https://3water.com");
</script>
 

例3 防刷新的倒计时代码

<!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="Content-Type" content="text/html; charset=gb2312" />  
<title> 3water.com</title>  
</head>  
<body>  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
var maxtime;  
if(window.name==''){   
maxtime = 1*60;  
}else{  
maxtime = window.name;  
}  
function CountDown(){  
if(maxtime>=0){  
minutes = Math.floor(maxtime/60);  
seconds = Math.floor(maxtime%60);  
msg = "距离考试结束还有"+minutes+"分"+seconds+"秒";  
document.all["timer"].innerHTML = msg;  
if(maxtime == 5*60) alert('注意,还有5分钟!');  
--maxtime;  
window.name = maxtime;   
}  
else{  
clearInterval(timer);  
alert("考试时间到,结束!");  
}  
}  
timer = setInterval("CountDown()",1000);  
//--> 
</SCRIPT>  
<div id="timer" style="color:red"></div>   
</body>  
</html>
 

例4:结合图片数字的现实更漂亮

代码中有图片,直接提供一个演示地址,注意里面的图片地址

http://demo.3water.com/js/2013/daojishi/index.htm

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 #Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 #Javascript
jquery获取子节点和父节点的示例代码
Sep 10 #Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 #Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 #Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 #Javascript
原始的js代码和jquery对比体会
Sep 10 #Javascript
You might like
PHP常用编译参数中文说明
2014/09/27 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
Python格式化css文件的方法
2015/03/10 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
django创建超级用户过程解析
2019/09/18 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
喝酒检查书范文
2014/02/23 职场文书
校庆标语集锦
2014/06/25 职场文书
婚礼答谢礼品
2015/01/20 职场文书
故宫英文导游词
2015/01/31 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL