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 对输入框进行限制(常用的都有)
Jul 30 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
vue双向绑定简要分析
Mar 23 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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+SqlServer实现分页显示
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue实现底部菜单功能
2018/07/24 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
详解Vue2的diff算法
2021/01/06 Vue.js
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
TensorFlow实现模型评估
2018/09/07 Python
Python发展史及网络爬虫
2019/06/19 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
商业门面租房协议书
2014/11/25 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers