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 split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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
MyEclipse常用配置图文教程
2014/09/11 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python 实现aes256加密
2020/11/27 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
TCP/IP模型的分界线
2012/12/01 面试题
中学教师培训制度
2014/01/31 职场文书
迎新晚会主持词
2014/03/24 职场文书
教师评语大全
2014/04/28 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
校园安全学习心得体会
2016/01/18 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Python爬取某拍短视频
2021/06/11 Python