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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Javascript动画效果(2)
Oct 11 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 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
wamp安装后自定义配置的方法
2014/08/23 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
javascript模拟命名空间
2015/04/17 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
SQLite3中文编码 Python的实现
2017/01/11 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python实现k-means聚类算法
2018/02/23 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
python异常处理和日志处理方式
2019/12/24 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
调解员先进事迹材料
2014/02/07 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏