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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
jquery map方法使用示例
Apr 23 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
webpack手动配置React开发环境的步骤
Jul 02 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
非常漂亮的js烟花效果
Mar 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php mysql数据库操作类
2008/06/04 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
编程语言Python的发展史
2014/09/26 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
SQL数据库笔试题
2016/03/08 面试题
军训的自我鉴定
2013/12/10 职场文书
网站美工岗位职责
2014/04/02 职场文书
暂停营业通知
2015/04/25 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js