首页
所有分类
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 以对象为索引的关联数组
May 19 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
JavaScript高级程序设计阅读笔记（六） ECMAScript中的运算符（二）
Feb 27 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
关于Js中new操作符的作用详解
Feb 21 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
缓冲区(1) cypress(1) openGauss(1) 弹窗(1) ant design(2) 变量提升(1) form表单(1) pdf(1) Eclipse(1) JDBC(3)
You might like
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
jquery validate.js表单验证入门实例（附源码）
2015/11/10 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
详解Python中的动态属性和特性
2018/04/07 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
俄罗斯马克西多姆家居用品网上商店：Максидом
2020/02/06 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
贷款担保书范文
2014/05/13 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
党员查摆剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android