当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

js做的各种倒计时

发表于: 2015-05-29   作者:ronin47   来源:转载   浏览:
摘要: 第一种:精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  1. 第一种:精确到秒的javascript倒计时代码  
  2.   
  3. HTML代码:  
  4. <form name="form1">  
  5. <div align="center" align="middle">  
  6. <center>离2010年还有:<br>  
  7. <input type="textarea" name="left" size="35" style="text-align: center" mce_style="text-align: center">  
  8. </center>  
  9. </div>  
  10. </form>  
  11. <mce:script LANGUAGE="javascript"><!--  
  12. startclock()  
  13. var timerID = null;  
  14. var timerRunning = false;  
  15. function showtime() {  
  16. Today = new Date();  
  17. var NowHour = Today.getHours();  
  18. var NowMinute = Today.getMinutes();  
  19. var NowMonth = Today.getMonth();  
  20. var NowDate = Today.getDate();  
  21. var NowYear = Today.getYear();  
  22. var NowSecond = Today.getSeconds();  
  23. if (NowYear <2000)  
  24. NowYear=1900+NowYear;  
  25. Today = null;  
  26. Hourleft = 23 - NowHour  
  27. Minuteleft = 59 - NowMinute  
  28. Secondleft = 59 - NowSecond  
  29. Yearleft = 2009 - NowYear  
  30. Monthleft = 12 - NowMonth - 1  
  31. Dateleft = 31 - NowDate  
  32. if (Secondleft<0)  
  33. {  
  34. Secondleft=60+Secondleft;  
  35. Minuteleft=Minuteleft-1;  
  36. }  
  37. if (Minuteleft<0)  
  38. {   
  39. Minuteleft=60+Minuteleft;  
  40. Hourleft=Hourleft-1;  
  41. }  
  42. if (Hourleft<0)  
  43. {  
  44. Hourleft=24+Hourleft;  
  45. Dateleft=Dateleft-1;  
  46. }  
  47. if (Dateleft<0)  
  48. {  
  49. Dateleft=31+Dateleft;  
  50. Monthleft=Monthleft-1;  
  51. }  
  52. if (Monthleft<0)  
  53. {  
  54. Monthleft=12+Monthleft;  
  55. Yearleft=Yearleft-1;  
  56. }  
  57. Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'  
  58. document.form1.left.value=Temp;  
  59. timerID = setTimeout("showtime()",1000);  
  60. timerRunning = true;  
  61. }  
  62. var timerID = null;  
  63. var timerRunning = false;  
  64. function stopclock () {  
  65. if(timerRunning)  
  66. clearTimeout(timerID);  
  67. timerRunning = false;  
  68. }  
  69. function startclock () {  
  70. stopclock();  
  71. showtime();  
  72. }  
  73. // --></mce:script>  
  74.   
  75.   
  76.   
  77. 第二种:某某运动会  
  78.   
  79. HTML代码:  
  80. <!--倒计时Javascript begin-->  
  81.  <mce:script language="JavaScript"><!--  
  82.    
  83.  function DigitalTime1()  
  84.  {   
  85.  var deadline= new Date("08/13/2007"//开幕倒计时  
  86.  var symbol="8月13日"  
  87.  var now = new Date()  
  88.  var diff = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差  
  89.  var leave = (deadline.getTime() - now.getTime()) + diff*60000  
  90.  var day = Math.floor(leave / (1000 * 60 * 60 * 24))  
  91.  var hour = Math.floor(leave / (1000*3600)) - (day * 24)  
  92.  var minute = Math.floor(leave / (1000*60)) - (day * 24 *60) - (hour * 60)  
  93.  var second = Math.floor(leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60)  
  94.  var deadline_2= new Date("08/13/2004"//开幕后计时  
  95.  var symbol_2="8月13日"  
  96.  var now_2 = new Date()  
  97.  var diff_2 = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差  
  98.  var leave_2 = (now_2.getTime() - deadline_2.getTime()) + diff_2*60000  
  99.  var day_2 = Math.floor(leave_2 / (1000 * 60 * 60 * 24))  
  100.  var hour_2 = Math.floor(leave_2 / (1000*3600)) - (day_2 * 24)  
  101.  var minute_2 = Math.floor(leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60)  
  102.  var second_2 = Math.floor(leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60)  
  103.    
  104.  day=day+1;  
  105.  day_2=day_2+1;  
  106.  if (day>0) //还未开幕  
  107.  {  
  108.  //LiveClock1.innerHTML = "现在"+symbol+"天"  
  109.  LiveClock1.innerHTML = "<font class=fon1>距离"+symbol+"开幕还有<font class=fon2>"+day+"</font>天</font>"  
  110.  setTimeout("DigitalTime1()",1000)  
  111.  }  
  112.  if (day<0) //已经开幕  
  113.  {  
  114.  //LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒"  
  115.  LiveClock1.innerHTML = "<font class=fon1>"+symbol+"开幕已有<font class=fon2>"+day_2+"</font>天</font>"  
  116.  setTimeout("DigitalTime1()",1000)  
  117.  }  
  118.  if (day==0) //正在开幕  
  119.  {  
  120.  //LiveClock1.innerHTML = "现在"+symbol+"天"  
  121.  LiveClock1.innerHTML = "<font class=fon1>某某运动会今天开幕</font>"  
  122.  setTimeout("DigitalTime1()",1000)  
  123.  }  
  124.    
  125.    
  126.  if (day<0 & day_2>19) //某某运动会结束  
  127.  {  
  128.  //LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒"  
  129.  LiveClock1.innerHTML = "<font class=fon1>某某运动会已全部结束</font>"  
  130.  setTimeout("DigitalTime1()",1000)  
  131.  }  
  132.  }  
  133. // --></mce:script>  
  134.  <!--倒计时Javascript end-->  
  135. <body onload=DigitalTime1()>  
  136. <div id= LiveClock1></div>  
  137. </body>  
  138.   
  139.   
  140.   
  141. 第三种:小时倒计时  
  142.   
  143. HTML代码:  
  144. <SCRIPT LANGUAGE="JavaScript">  
  145. <!--  
  146. var maxtime = 60*60 //一个小时,按秒计算,自己调整!  
  147. function CountDown(){  
  148.  if(maxtime>=0){  
  149.  minutes = Math.floor(maxtime/60);  
  150.  seconds = Math.floor(maxtime%60);  
  151.  msg = "距离结束还有"+minutes+"分"+seconds+"秒";  
  152.  document.all["timer"].innerHTML=msg;  
  153.  if(maxtime == 5*60) alert('注意,还有5分钟!');  
  154.  --maxtime;  
  155.  }  
  156.  else{  
  157.  clearInterval(timer);  
  158.  alert("时间到,结束!");  
  159.  }  
  160. }  
  161. timer = setInterval("CountDown()",1000);  
  162. //-->  
  163. </SCRIPT>  
  164. <div id="timer" style="color:red" mce_style="color:red"></div>  
  165.   
  166.   
  167.   
  168. 第四种:最简倒计时  
  169.   
  170. HTML代码:  
  171. <Script Language="JavaScript">   
  172. <!-- Begin   
  173.   var timedate= new Date("January 14,2006");   
  174.   var times="研究生考试";   
  175.   var now = new Date();   
  176.   var date = timedate.getTime() - now.getTime();   
  177.   var time = Math.floor(date / (1000 * 60 * 60 * 24));   
  178.   if (time >= 0) ;  
  179. document.write("<li><font color=#DEDBDE>现在离2006年"+times+"还有: <font color=#ffffff><b>"+time +"</b></font> 天</font></li>");  
  180. // End -->  
  181. </Script>  
  182.   
  183.   
  184.   
  185. 第五种:最简倒计时二  
  186.   
  187. HTML代码:  
  188. <mce:script language="JavaScript" type="text/javascript"><!--  
  189. function djs(){  
  190. var urodz= new Date("11/12/2008");   
  191. var now = new Date();  
  192. var num  
  193. var ile = urodz.getTime() - now.getTime();    
  194. var dni = Math.floor(ile / (1000 * 60 * 60 * 24));    
  195. if (dni >1)    
  196. num=dni+1  
  197. else if (dni == 1) num=2   
  198. else if (dni == 0) num=1  
  199. else num=0   
  200. document.write(num)    
  201. }  
  202. // --></mce:script>  
  203. 距某某开幕式还有 [<mce:script language="JavaScript" type="text/javascript"><!--  
  204. djs()  
  205. // --></mce:script>] 天  
  206. 第五个:Javascript倒计时器 - 采用系统时间自校验  
  207. 这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下:  
  208. <span id="clock">00:01:11:00</span>  
  209. <input id="startB" type="button" value="start countdown!" onclick="run()">  
  210. <input id="endB" type="button" value="stop countdown!" onclick="stop()">  
  211. <br>  
  212. <input id="diff" type="text">  
  213. <input id="next" type="text">  
  214. <mce:script language="Javascript"><!--  
  215. /* This notice must be untouched at all times. 
  216. countdown.js    v. 1.0 
  217. The latest version is available at 
  218. http://blog.csdn.net/yjgx007 
  219. Copyright (c) 2004 Xinyi.Chen. All rights reserved. 
  220. Created 7/30/2004 by Xinyi.Chen.  
  221. Web: http://blog.csdn.net/yjgx007 
  222. E-Mail: chenxinyi1978@hotmail.com 
  223. Last modified: 7/30/2004 
  224. This program is free software; 
  225. you can redistribute it and/or modify it under the terms of the 
  226. GNU General Public License as published by the Free Software Foundation; 
  227. See the GNU General Public License 
  228. at http://www.gnu.org/copyleft/gpl.html for more details. 
  229. */  
  230. var normalelapse = 100;  
  231. var nextelapse = normalelapse;  
  232. var counter;   
  233. var startTime;  
  234. var start = clock.innerText;   
  235. var finish = "00:00:00:00";  
  236. var timer = null;  
  237. // 开始运行  
  238. function run() {  
  239.   startB.disabled = true;  
  240.   endB.disabled = false;  
  241.   counter = 0;  
  242.   // 初始化开始时间  
  243.   startTime = new Date().valueOf();  
  244.   // nextelapse是定时时间, 初始时为100毫秒  
  245.   // 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行  
  246.   timer = window.setInterval("onTimer()", nextelapse);   
  247. }  
  248. // 停止运行  
  249. function stop() {  
  250.   startB.disabled = false;  
  251.   endB.disabled = true;  
  252.   window.clearTimeout(timer);  
  253. }  
  254. window.onload = function() {  
  255.   endB.disabled = true;  
  256. }  
  257. // 倒计时函数  
  258. function onTimer()  
  259. {  
  260. if (start == finish)  
  261. {  
  262.   window.clearInterval(timer);  
  263.   alert("time is up!");  
  264.   return;  
  265. }  
  266. var hms = new String(start).split(":");  
  267. var ms = new Number(hms[3]);  
  268. var s = new Number(hms[2]);  
  269. var m = new Number(hms[1]);  
  270. var h = new Number(hms[0]);  
  271.     
  272. ms -= 10;  
  273. if (ms < 0)  
  274. {  
  275.   ms = 90;  
  276.   s -= 1;  
  277.   if (s < 0)  
  278.   {  
  279.     s = 59;  
  280.     m -= 1;  
  281.   }  
  282.     
  283.   if (m < 0)  
  284.   {  
  285.     m = 59;  
  286.     h -= 1;  
  287.   }  
  288. }  
  289. var ms = ms < 10 ? ("0" + ms) : ms;  
  290. var ss = s < 10 ? ("0" + s) : s;  
  291. var sm = m < 10 ? ("0" + m) : m;  
  292. var sh = h < 10 ? ("0" + h) : h;  
  293. start = sh + ":" + sm + ":" + ss + ":" + ms;  
  294. clock.innerText = start;  
  295. // 清除上一次的定时器  
  296. window.clearInterval(timer);  
  297. // 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse  
  298. counter++;   
  299. var counterSecs = counter * 100;  
  300. var elapseSecs = new Date().valueOf() - startTime;  
  301. var diffSecs = counterSecs - elapseSecs;  
  302. nextelapse = normalelapse + diffSecs;  
  303. diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;  
  304. next.value = "nextelapse = " + nextelapse;  
  305. if (nextelapse < 0) nextelapse = 0;  
  306. // 启动新的定时器  
  307. timer = window.setInterval("onTimer()", nextelapse);   
  308. }  
  309. // --></mce:script> 

js做的各种倒计时

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
其实主要是借鉴了了这篇文的写法(http://tuzwu.iteye.com/blog/819081),俺稍作了修改,以便更适
这两天工作不是很忙,就常上论坛。 看到有很多人在问倒计时的问题,以前做过类似的东西,现在整理了
打算写几篇博客总结下近来做的一个东西:www.eccpitbj.org/chitec2014 项目中要用到倒计时,找了几
利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单。如果大牛们有更好的办法欢迎补充。 这种效
One of the areas that has seen the most improvement in Ext JS 4 is the data package. The data
打算写几篇博客总结下近来做的一个东西:www.eccpitbj.org/chitec2014 项目中要用到倒计时,找了几
使用jquery开发的打字练习网页小游戏,用到了js面向对象编程的一些基础知识。由于没有做难度控制等
一、demo与效果展示 为节约时间,我就直接套用了企鹅团的界面作为demo的背景。因为是倒计时,所以需
为什么现在JE无法上传压缩附件了呢...不然之能看到截图了。 各位朋友啊 不是我不传上来,而是JE好像
这个效果好好看,原来js也是那么强大的, 效果预览 : http://www.ablanxue.com/prone_4700_1.html
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号