首页
所有分类
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 indexOf函数使用说明
Jul 03 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
js实现鼠标切换图片（无定时器）
Jan 27 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
绝对定位(1) 相对定位(1) geoserver(1) postcss-px2rem(1) sql模式(1) 全表扫描(1) into outfile(1) lua(3) 索引树扫描(1) 匹配(1)
You might like
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php发送post请求函数分享
2014/03/06 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
php解决安全问题的方法实例
2019/09/19 PHP
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
vue组件是如何解析及渲染的？
2021/01/13 Vue.js
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
深入浅析python 中的匿名函数
2018/05/21 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
vue常用指令代码实例总结
2020/03/16 Python
python输出数学符号实例
2020/05/11 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
中国领先的专业演出票务网：永乐票务
2016/08/29 全球购物
DC Shoes官网：美国滑板鞋和服饰品牌
2017/09/03 全球购物
华为python面试题
2016/05/03 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
学生打架检讨书
2014/02/14 职场文书
文化宣传方案
2014/03/13 职场文书
学生手册评语
2014/05/05 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
医院科室评语
2015/01/04 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
教你用python实现12306余票查询
2021/06/30 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle