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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 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介绍篇
2010/10/26 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
移动端界面的适配
2017/01/11 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
用Python实现协同过滤的教程
2015/04/08 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
总裁助理岗位职责
2014/02/17 职场文书
促销活动计划书
2014/05/02 职场文书
年终晚会活动方案
2014/08/21 职场文书
环保项目建议书
2014/08/26 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
教师工作表现自我评价
2015/03/05 职场文书
幼儿园见习总结
2015/06/23 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js