JS常用倒计时代码实例总结


Posted in Javascript onFebruary 07, 2017

本文实例总结了JS常用倒计时代码。分享给大家供大家参考,具体如下:

第一种:精确到秒的javascript倒计时代码

<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>

第二种:某某运动会

<!--倒计时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>

第三种:小时倒计时

<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>

第四种:最简倒计时

<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>

第五种:最简倒计时二

<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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
JS中Array数组学习总结
Jan 18 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
js实现简单模态框实例
Nov 16 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 #Javascript
javascript验证香港身份证的格式或真实性
Feb 07 #Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 #Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 #Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 #Javascript
纯js三维数组实现三级联动效果
Feb 07 #Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 #Javascript
You might like
php中变量及部分适用方法
2008/03/27 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python如何建立全零数组
2020/07/19 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
大学生作弊检讨书
2014/02/19 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
小学二年级学生评语
2014/04/21 职场文书
亚运会口号
2014/06/20 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
复兴之路展览观后感
2015/06/02 职场文书
企业宣传稿范文
2015/07/23 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
关于感恩的作文
2019/08/26 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL