倒计时计时器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了倒计时计时器相关的知识，希望对你有一定的参考价值。

Pure javascript countdown timer
  1. <html>
  2. <script language="JavaScript">
  3. TargetDate = "12/31/2020 5:00 AM";
  4. BackColor = "palegreen";
  5. ForeColor = "navy";
  6. CountActive = true;
  7. CountStepper = -1;
  8. LeadingZero = true;
  9. DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
  10. FinishMessage = "It is finally here!";
  11. </script>
  12. <body>
  13. <form name="counter"><input type="text" size="8" style="border:none; cursor:default;" name="d2">
  14. <input type="submit" name="Reset" value="Reset" onclick="reset();">
  15. <input type="text" size="8"  name="d3">
  16. <input type="button" onClick="setVal();" value="Start" id="name" />
  17. </form> 
  18. <script> 
  19. <!-- 
  20. // 
  21.  var milisec=0 
  22.  var seconds=30 
  23.  document.counter.d2.value='30' 
  24.  
  25. function display(){ 
  26.  
  27.  
  28.  
  29.  if (milisec<=0){ 
  30.     milisec=9 
  31.     seconds-=1 
  32.  } 
  33.  if (seconds<=-1){ 
  34.     milisec=0 
  35.     seconds+=1 
  36.  } 
  37.  else 
  38.     milisec-=1 
  39.     document.counter.d2.value=seconds+"."+milisec 
  40.     setTimeout("display()",100) 
  41. } 
  42. display() 
  43.  
  44. function setVal() {
  45.  
  46.     var inputGet = document.counter.d3.value;
  47. 		document.counter.d2.value= inputGet;
  48. 	seconds  = inputGet;
  49. 	milisec = 0;
  50. 	display();
  51. }
  52.  
  53. --> 
  54. </script> 
  55.  
  56. </body>
  57. </html>

以上是关于倒计时计时器的主要内容，如果未能解决你的问题，请参考以下文章

JUC并发编程 共享模式之工具 JUC CountdownLatch（倒计时锁） -- CountdownLatch应用（等待多个线程准备完毕（ 可以覆盖上次的打印内）等待多个远程调用结束）(代码片段

如果用户没有使用浏览器，则jQuery计时器停止

如何实现React原生倒计时圈

颤振计时器仅更新秒小部件

#yyds干货盘点#愚公系列2023年02月 .NET/C#知识点-程序运行计时的总结

自动刷新android片段，直到满足条件