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 相关文章推荐
JS调试必备的5个debug技巧
Mar 07 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
jquery实现图片切换代码
Oct 13 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
vue实现表单录入小案例
Sep 27 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
react 项目中引入图片的几种方式
Jun 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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python求离散序列导数的示例
2019/07/10 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python中的yield from语法快速学习
2020/11/06 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
软件项目实施计划书
2014/05/02 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
关于旅游的活动方案
2014/08/15 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年就业工作总结
2014/11/26 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
mysql优化
2021/04/06 MySQL
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs