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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
学习YUI.Ext 第二天
Mar 10 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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
php模板中出现空行解决方法
2011/03/08 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python hashlib模块用法实例分析
2018/06/12 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python读写Excel表格的方法
2021/03/02 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
关于Java String的一道面试题
2013/09/29 面试题
化工操作工岗位职责
2014/04/29 职场文书
课外科技活动总结
2014/08/27 职场文书