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英文日期(有时间)选择器
May 02 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
js读取配置文件自写
Feb 11 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python中str.join()简单用法示例
2018/03/20 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
婚前财产公证书
2014/04/10 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫