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

最全面的JS倒计时代码

Posted in Javascript onSeptember 17, 2016

本文实例为大家分享了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%60); 
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"> 
/* This notice must be untouched at all times.

countdown.js v. 1.0 
The latest version is available at 
http://blog.csdn.net/yjgx007

Copyright (c) 2004 Xinyi.Chen. All rights reserved. 
Created 7/30/2004 by Xinyi.Chen. 
Web: http://blog.csdn.net/yjgx007 
E-Mail: chenxinyi1978@hotmail.com 
Last modified: 7/30/2004

This program is free software; 
you can redistribute it and/or modify it under the terms of the 
GNU General Public License as published by the Free Software Foundation;

See the GNU General Public License 
at http://www.gnu.org/copyleft/gpl.html for more details. 
*/ 
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>

附加一个完整的倒计时和时间  复制即可使用  运行的结果分别是： 

天 小时 分 秒 2013年01月22日 15:44:23 星期二

<html>
<head>
<title>倒计时测试</title>
 <script src="http://event.wushuangol.com/ShopClothes/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
 
<script language="JavaScript">
 $(document).ready(function () {

<!-- 时间必须启动 -->
 clockon();
 });

function clockon() {
 var now = new Date();
 var year = now.getFullYear(); //getFullYear getYear
 var month = now.getMonth();
 var date = now.getDate();
 var day = now.getDay();
 var hour = now.getHours();
 var minu = now.getMinutes();
 var sec = now.getSeconds();
 var week;
 month = month + 1;

 if (month < 10) month = "0" + month;
 if (date < 10) date = "0" + date;
 if (hour < 10) hour = "0" + hour;
 if (minu < 10) minu = "0" + minu;
 if (sec < 10) sec = "0" + sec;
 var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
 week = arr_week[day];
 var time = "";

 time = year + "年" + month + "月" + date + "日" + " " + hour + ":" + minu + ":" + sec + " " + week;
 $("#bgclock").html(time);

 var timer = setTimeout("clockon()", 200);

}

<!-- 隐藏脚本从旧的浏览器
var DifferHour = -1
var DifferMinute = -1
var DifferSecond = -1
var Tday1 = new Date("Feb 11, 2013 00:00:00") //**倒计时时间-注意格式
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
function clock()

{

 var time = new Date()
 var hour = time.getHours()
 var minute = time.getMinutes()
 var second = time.getSeconds()
 var timevalue = ""+((hour > 12) ? hour-12:hour)
 timevalue +=((minute < 10) ? ":0":":")+minute
 timevalue +=((second < 10) ? ":0":":")+second
 timevalue +=((hour >12 ) ? " PM":" AM")
 var convertHour = DifferHour
 var convertMinute = DifferMinute
 var convertSecond = DifferSecond
 var Diffms = Tday1.getTime() - time.getTime()
 DifferHour = Math.floor(Diffms / daysms)
 Diffms -= DifferHour * daysms
 DifferMinute = Math.floor(Diffms / hoursms)
 Diffms -= DifferMinute * hoursms
 DifferSecond = Math.floor(Diffms / Secondms)
 Diffms -= DifferSecond * Secondms

 var dSecs = Math.floor(Diffms / microsecond)
 if(convertHour != DifferHour) document.formnow.dd.value=DifferHour
 if(convertMinute != DifferMinute) document.formnow.hh.value=DifferMinute
 if(convertSecond != DifferSecond) document.formnow.mm.value=DifferSecond

 document.formnow.ss.value=dSecs
 document.formnow.ss.value=dSecs
// document.formnow.Tnow.value= DifferHour DifferMinute + DifferSecond + dSecs

setTimeout("clock()",1000)

}

//

隐藏-->
</script>
</head>

<body onload="clock();return true" >

<!--显示出内容-->
<form name="formnow">
<input name="dd" type="text" style="border:0;" size=2>
天
<input name="hh" type="text" style="border:0;" size=2>
小时
<input name="mm" type="text" style="border:0;" size=2>
分
<input name="ss" type="text" style="border:0;" size=2>
秒
<span id="bgclock" style="float:right;padding-right:10px; padding-top:2px;text="red""></span>
</form>

<!--倒计时完毕啦-->

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。<

最全面的JS倒计时代码

- Author -

lijiao

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

Javascript 相关文章推荐
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
jQuery检查元素存在性(推荐)
Sep 17 #Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 #Javascript
Js获取当前日期时间及格式化代码
Sep 17 #Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 #Javascript
jquery遍历标签中自定义的属性方法
Sep 17 #Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 #Javascript
详解Angular2中的编程对象Observable
Sep 17 #Javascript
Hive(5) RestTemplate(1) Windows Server(4) 反射(1) NTP(1) HttpClient(1) Quartz(1) dataBinding(1) ip2region(1) Windows Server 2022(3)
You might like
source.php查看源文件
2006/12/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[00:47]DOTA2荣耀之路6：玩不了啦！
2018/05/30 DOTA
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python os.rename实例用法详解
2020/12/06 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
什么叫做SQL注入，如何防止
2016/10/04 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
幼儿园教师考核制度
2014/02/01 职场文书
社区娱乐活动方案
2014/08/21 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android