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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
Node.js笔记之process模块解读
May 31 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php模板之Phpbean的目录结构
2008/01/10 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
python实现用于测试网站访问速率的方法
2015/05/26 Python
python实现自动发送报警监控邮件
2018/06/21 Python
django query模块
2019/04/20 Python
Python读取stdin方法实例
2019/05/24 Python
解决python replace函数替换无效问题
2020/01/18 Python
Python tkinter模版代码实例
2020/02/05 Python
如何用Python绘制3D柱形图
2020/09/16 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
人大调研汇报材料
2014/08/14 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
新课程改革心得体会
2016/01/22 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书