JavaScript实现简单的数字倒计时


Posted in Javascript onMay 15, 2015

这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下:

runCount(10);
function runCount(t){
  if(t>0){
    document.getElementById(‘shownum').innerHTML = t;
    t?;
    setTimeout(function(){runCount(t);},1000);
  }else{
    document.getElementById(‘shownum').innerHTML = ‘倒计时结束!';
  }
}

运行该js代码前,需要先添加一个id为shownum的div。

js实现动态倒计时功能 * a是从后台接收到的时间戳,需转换成毫秒单位

<div>
  距明年还有:
  <span id='daya'></span>天
  <span id='hoursa'></span>小时
  <span id='minua'></span>分
  <span id='secoa'></span>秒
</div>
<script type="text/javascript">
/**
*
*  copyright WE 2012.7
*  js实现动态倒计时功能
*  a是从后台接收到的时间戳,需转换成毫秒单位
*
*/
  var a=12345678;     //以毫秒为单位
  function fomtime()
  {
    a=a-1000;
    var b=new Date();
    b.setTime(0);
    var c=new Date();
    c.setTime(a);
    var day1=b.getDate();    //为方便调用,把天数、小时等单独定义
    var hours1=b.getHours();
    var minu1=b.getMinutes();
    var seco1=b.getSeconds();
    var day2=c.getDate();
    var hours2=c.getHours();
    var minu2=c.getMinutes();
    var seco2=c.getSeconds();
    var day=day2-day1;
    var hours=hours2-hours1;
    var minu=minu2-minu1;
    var seco=seco2-seco1;
    document.getElementById('daya').innerHTML=day;
    document.getElementById('hoursa').innerHTML=hours;
    document.getElementById('minua').innerHTML=minu;
    document.getElementById('secoa').innerHTML=seco;
    setTimeout("fomtime()",1000);
  }
  fomtime();
</script>

按天倒计时

HTML代码1:

<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代码2:

<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倒计时代码

HTML代码:

<form name="form1"> 
<div align="center" align="center"> 
<center>离2013年还有:<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>

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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
js实现计算器功能
Aug 10 Javascript
JavaScript生成福利彩票双色球号码
May 15 #Javascript
JavaScript实现列表分页功能特效
May 15 #Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 #Javascript
js生成验证码并直接在前端判断
May 15 #Javascript
javascript实现表格增删改操作实例详解
May 15 #Javascript
javascript实现可全选、反选及删除表格的方法
May 15 #Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 #Javascript
You might like
PHP开发需要注意的安全问题
2010/09/01 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python实现银行管理系统
2019/10/25 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
白血病捐款倡议书
2014/05/14 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
骨干教师个人总结
2015/02/11 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python