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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
用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 删除数组元素
2009/01/16 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python多线程并发实例及其优化
2019/06/27 Python
利用python实现逐步回归
2020/02/24 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
护士检查书
2014/01/17 职场文书
社区消防工作实施方案
2014/03/21 职场文书