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代码
Mar 11 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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模块memcache和memcached区别分析
2011/06/14 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP运行模式汇总
2016/11/06 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python对Excel的读取的示例代码
2020/02/14 Python
如何基于线程池提升request模块效率
2020/04/18 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
大学生农村教师实习自我鉴定
2013/09/21 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
管道维修工岗位职责
2013/12/27 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
聚美优品广告词改编
2014/03/14 职场文书
个人自我鉴定总结
2014/03/25 职场文书
房屋买卖协议书
2014/04/10 职场文书
安全先进班组材料
2014/12/26 职场文书