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 事件对象的实现
Jul 13 Javascript
ajax与302响应代码测试
Oct 23 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
JavaScript实现动态留言板
Mar 16 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
咖啡知识大全
2021/03/03 新手入门
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
JS模块与命名空间的介绍
2013/03/22 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
python中异常捕获方法详解
2017/03/03 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
pytorch构建多模型实例
2020/01/15 Python
django正续或者倒序查库实例
2020/05/19 Python
Python实现扫码工具的示例代码
2020/10/09 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python
Tomcat弱口令复现及利用
2022/05/06 Servers