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 24 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Javascript中的async awai的用法
May 17 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
js实现弹窗猜数字游戏
Nov 26 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
CI(CodeIgniter)框架配置
2014/06/10 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
完美的js图片轮换效果
2017/02/05 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python3实现暴力穷举博客园密码
2016/06/19 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python实现八皇后问题示例代码
2018/12/09 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python中断多重循环的思路总结
2019/10/04 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
python中取绝对值简单方法总结
2020/07/24 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
幼儿园托班开学寄语
2014/01/18 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
公司节能减排方案
2014/05/16 职场文书
先进人物事迹材料
2014/12/29 职场文书
《去年的树》教学反思
2016/02/18 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript