首页
所有分类
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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
js控制table合并具体实现
Feb 20 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
基于Vue.js实现tab滑块效果
Jul 23 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 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
Jmerte(1) click(1) Yolov5(1) 项目打包(2) KVM(1) vue-router-link(1) 本地化存储(1) TimePickerView(1) vue-cli3.x(1) 自定义组件(1)
You might like
php获取apk包信息的方法
2014/08/15 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
python爬虫常用的模块分析
2014/08/29 Python
在Django中创建动态视图的教程
2015/07/15 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python常见的格式化输出小结
2016/12/15 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python学生管理系统开发
2019/01/30 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
澳大利亚领先的睡衣品牌：Peter Alexander
2016/08/16 全球购物
Qoo10台湾站：亚洲领先的在线市场
2018/05/15 全球购物
澳大利亚音乐商店：Bava’s Music City
2019/05/05 全球购物
《值日生》教学反思
2014/02/17 职场文书
租房协议书样本
2014/08/20 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
护士辞职信怎么写
2015/02/27 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP