首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

JS倒计时代码汇总

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
js实现常用排序算法
Aug 09 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
Vue组件基础用法详解
Feb 05 Javascript
js中forEach，for in，for of循环的用法示例小结
Mar 14 Javascript
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
apply(1) 数据处理(2) GUI(2) mp3Play(1) 音频(1) pandas(7) Pool(1) Tkinter(4) 矩阵(1) agg(1)
You might like
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
combox改进版 页面原型参考dojo的，比网上jQuery的那些combox功能强，代码更小
2010/04/15 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue+Element中table表格实现可编辑（select下拉框）
2020/05/21 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python中线程和进程有何区别
2020/06/17 Python
CSS3弹性盒模型开发笔记（三）
2016/04/26 HTML / CSS
英文简历中的自我评价
2013/10/06 职场文书
白酒市场营销方案
2014/02/25 职场文书
抽奖活动主持词
2014/03/31 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
土地转让协议书
2014/04/15 职场文书
小学英语课后反思
2014/04/26 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记