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或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
用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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python 产生token及token验证的方法
2018/12/26 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python爬虫基础之urllib的使用
2020/12/31 Python
项目经理的岗位职责
2013/11/23 职场文书
求职信范文大全
2014/05/26 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
长城导游词300字
2015/01/30 职场文书
教师节座谈会主持词
2015/07/03 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Go归并排序算法的实现方法
2022/04/06 Golang