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传值 判断
Oct 26 Javascript
jQuery find和children方法使用
Jan 31 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
YUI模块开发原理详解
Nov 18 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
js选择器全面解析
Jun 27 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 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 图片水印类代码
2012/08/27 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
js格式化时间的方法
2015/12/18 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
SVG描边动画
2017/02/23 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
vue组件学习教程
2017/09/09 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
详解Vue之事件处理
2020/07/10 Javascript
在Python的循环体中使用else语句的方法
2015/03/30 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python 文件数据读写的具体实现
2020/01/24 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
小学生自我评价范例
2013/09/24 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
员工2014年度工作总结
2014/12/09 职场文书
教师个人自我评价
2015/03/04 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
聊聊redis-dump工具安装问题
2022/01/18 Redis
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python