JS倒计时代码汇总


Posted in Javascript onNovember 25, 2014

本文实例总结了常见的JS倒计时代码。分享给大家供大家参考。具体汇总如下:

第一种:精确到秒的javascript倒计时代码 

HTML代码: 

<form name="form1">  

<div align="center" align="center">  

<center>离2010年还有:<br>  

<input type="textarea" name="left" size="35" style="text-align: center">  

</center>  

</div>  

</form>  

<script LANGUAGE="javascript">  

startclock()  

var timerID = null;  

var timerRunning = false;  

function showtime() {  

Today = new Date();  

var NowHour = Today.getHours();  

var NowMinute = Today.getMinutes();  

var NowMonth = Today.getMonth();  

var NowDate = Today.getDate();  

var NowYear = Today.getYear();  

var NowSecond = Today.getSeconds();  

if (NowYear <2000)  

NowYear=1900+NowYear;  

Today = null;  

Hourleft = 23 - NowHour  

Minuteleft = 59 - NowMinute  

Secondleft = 59 - NowSecond  

Yearleft = 2009 - NowYear  

Monthleft = 12 - NowMonth - 1

Dateleft = 31 - NowDate  

if (Secondleft<0)  

{  

Secondleft=60+Secondleft;  

Minuteleft=Minuteleft-1;  

}  

if (Minuteleft<0)  

{   

Minuteleft=60+Minuteleft;  

Hourleft=Hourleft-1;  

}  

if (Hourleft<0)  

{  

Hourleft=24+Hourleft;  

Dateleft=Dateleft-1;  

}  

if (Dateleft<0)  

{  

Dateleft=31+Dateleft;  

Monthleft=Monthleft-1;  

}  

if (Monthleft<0)  

{  

Monthleft=12+Monthleft;  

Yearleft=Yearleft-1;  

}  

Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'

document.form1.left.value=Temp;  

timerID = setTimeout("showtime()",1000);  

timerRunning = true;  

}  

var timerID = null;  

var timerRunning = false;  

function stopclock () {  

if(timerRunning)  

clearTimeout(timerID);  

timerRunning = false;  

}  

function startclock () {  

stopclock();  

showtime();  

}  

// -->  

</script>

第二种:某某运动会 

HTML代码: 

<!--倒计时Javascript begin-->  

<script language="JavaScript">  

<!--   

function DigitalTime1()  

{   

var deadline= new Date("08/13/2007") //开幕倒计时  

var symbol="8月13日"

var now = new Date()  

var diff = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差  

var leave = (deadline.getTime() - now.getTime()) + diff*60000

var day = Math.floor(leave / (1000 * 60 * 60 * 24))  

var hour = Math.floor(leave / (1000*3600)) - (day * 24)  

var minute = Math.floor(leave / (1000*60)) - (day * 24 *60) - (hour * 60)  

var second = Math.floor(leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60)  

var deadline_2= new Date("08/13/2004") //开幕后计时  

var symbol_2="8月13日"

var now_2 = new Date()  

var diff_2 = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差  

var leave_2 = (now_2.getTime() - deadline_2.getTime()) + diff_2*60000

var day_2 = Math.floor(leave_2 / (1000 * 60 * 60 * 24))  

var hour_2 = Math.floor(leave_2 / (1000*3600)) - (day_2 * 24)  

var minute_2 = Math.floor(leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60)  

var second_2 = Math.floor(leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60)  

day=day+1;  

day_2=day_2+1;  

if (day>0) //还未开幕  

{  

//LiveClock1.innerHTML = "现在"+symbol+"天"  

LiveClock1.innerHTML = "<font

setTimeout("DigitalTime1()",1000)  

}  

if (day<0) //已经开幕  

{  

//LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒"  

LiveClock1.innerHTML = "<font

setTimeout("DigitalTime1()",1000)  

}  

if (day==0) //正在开幕  

{  

//LiveClock1.innerHTML = "现在"+symbol+"天"  

LiveClock1.innerHTML = "<font

setTimeout("DigitalTime1()",1000)  

}  

   

if (day<0 & day_2>19) //某某运动会结束  

{  

//LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒"  

LiveClock1.innerHTML = "<font

setTimeout("DigitalTime1()",1000)  

}  

}  

// -->  

</script>  

<!--倒计时Javascript end-->  

<body onload=DigitalTime1()>  

<div id= LiveClock1></div>  

</body>

 
第三种:小时倒计时 

HTML代码: 

<SCRIPT LANGUAGE="JavaScript">  

<!--  

var maxtime = 60*60 //一个小时,按秒计算,自己调整!  

function CountDown(){  

if(maxtime>=0){  

minutes = Math.floor(maxtime/60);  

seconds = Math.floor(maxtime`);  

msg = "距离结束还有"+minutes+"分"+seconds+"秒";  

document.all["timer"].innerHTML=msg;  

if(maxtime == 5*60) alert('注意,还有5分钟!');  

--maxtime;  

}  

else{  

clearInterval(timer);  

alert("时间到,结束!");  

}  

}  

timer = setInterval("CountDown()",1000);  

//-->  

</SCRIPT>  

<div id="timer" style="color:red"></div>

第四种:最简倒计时 

HTML代码: 

<Script Language="JavaScript">   

<!-- Begin   
var timedate= new Date("January 14,2006");   

var times="研究生考试";   

var now = new Date();   

var date = timedate.getTime() - now.getTime();   

var time = Math.floor(date / (1000 * 60 * 60 * 24));   

if (time >= 0) ;  

document.write("<li><font color=#DEDBDE>现在离2006年"+times+"还有: <font color=#ffffff><b>"+time +"</b></font> 天</font></li>");  

// End -->  

</Script>

第五种:最简倒计时二 

HTML代码: 

<script language="JavaScript" type="text/javascript">  

function djs(){  

var urodz= new Date("11/12/2008");   

var now = new Date();  

var num  

var ile = urodz.getTime() - now.getTime();  

var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
  

if (dni >1)
  

num=dni+1

else if (dni == 1) num=2   

else if (dni == 0) num=1

else num=0   

document.write(num)
  

}  

</script>  

距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天

第六个:Javascript倒计时器 - 采用系统时间自校验

这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下: 

<span id="clock">00:01:11:00</span>  

<input id="startB" type="button" value="start countdown!" onclick="run()">  

<input id="endB" type="button" value="stop countdown!" onclick="stop()">  

<br>  

<input id="diff" type="text">  

<input id="next" type="text">  

<script language="Javascript">  

var normalelapse = 100;  

var nextelapse = normalelapse;  

var counter;   

var startTime;  

var start = clock.innerText;   

var finish = "00:00:00:00";  

var timer = null;  

// 开始运行  

function run() {  

startB.disabled = true;  

endB.disabled = false;  

counter = 0;  

// 初始化开始时间  

startTime = new Date().valueOf();  

// nextelapse是定时时间, 初始时为100毫秒  

// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行  

timer = window.setInterval("onTimer()", nextelapse);   

}  

// 停止运行  

function stop() {  

startB.disabled = false;  

endB.disabled = true;  

window.clearTimeout(timer);  

}  

window.onload = function() {  

endB.disabled = true;  

}  

// 倒计时函数  

function onTimer()  

{  

if (start == finish)  

{  

window.clearInterval(timer);  

alert("time is up!");  

return;  

}  

var hms = new String(start).split(":");  

var ms = new Number(hms[3]);  

var s = new Number(hms[2]);  

var m = new Number(hms[1]);  

var h = new Number(hms[0]);  

ms -= 10;  

if (ms < 0)  

{  

ms = 90;  

s -= 1;  

if (s < 0)  

{  

    s = 59;  

    m -= 1;  

}  

if (m < 0)  

{  

    m = 59;  

    h -= 1;  

}  

}  

var ms = ms < 10 ? ("0" + ms) : ms;  

var ss = s < 10 ? ("0" + s) : s;  

var sm = m < 10 ? ("0" + m) : m;  

var sh = h < 10 ? ("0" + h) : h;  

start = sh + ":" + sm + ":" + ss + ":" + ms;  

clock.innerText = start;  

// 清除上一次的定时器  

window.clearInterval(timer);  

// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse  

counter++;   

var counterSecs = counter * 100;  

var elapseSecs = new Date().valueOf() - startTime;  

var diffSecs = counterSecs - elapseSecs;  

nextelapse = normalelapse + diffSecs;  

diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;  

next.value = "nextelapse = " + nextelapse;  

if (nextelapse < 0) nextelapse = 0;  

// 启动新的定时器  

timer = window.setInterval("onTimer()", nextelapse);   

}  

</script>

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
jquery中push()的用法(数组添加元素)
Nov 25 #Javascript
Jquery焦点图实例代码
Nov 25 #Javascript
jQuery事件绑定和委托实例
Nov 25 #Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 #Javascript
JS跨域问题详解
Nov 25 #Javascript
javascript 中__proto__和prototype详解
Nov 25 #Javascript
js 加密压缩出现bug解决方案
Nov 25 #Javascript
You might like
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php数组键名技巧小结
2015/02/17 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
javascript数据类型详解
2017/02/07 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
了解重排与重绘
2019/05/29 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python递归函数特点及原理解析
2020/03/04 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
2014新年元旦活动策划方案
2014/02/18 职场文书
爱情寄语大全
2014/04/09 职场文书
门店业绩提升方案
2014/06/08 职场文书
三严三实对照检查材料
2014/09/22 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL