javascript计算未来时间距离当前时间的时长

avatar
avatar
loveatj
244
文章
38
评论
2018年12月24日12:33:00 评论 188 1214字阅读4分2秒

差不多相当于倒计时插件,不过需要需要自己设置到期时间。

代码如下:

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>时间计算</title>  
  6. </head>  
  7. <body>  
  8. <input type="text" class="future" value="0000/00/00 00:00:00">  
  9. <button class="count">计算</button>  
  10. <div>  
  11. <span id="title"></span>  
  12. <span id="d"></span>  
  13. <span id="h"></span>  
  14. <span id="m"></span>  
  15. <span id="s"></span>  
  16. </div>  
  17. </body>  
  18. <script type="text/javascript">  
  19. var future;  
  20. document.querySelector(".count").onclick = function() {  
  21. future = document.querySelector(".future").value;  
  22. count();  
  23. }  
  24.   
  25. function count() {  
  26. var date = new Date();  
  27. var now = date.getTime();  
  28. var endTime = new Date(future);  
  29. var end = endTime.getTime();  
  30. var center = end - now;  
  31. if (center >= 0) {  
  32. document.getElementById("title").innerHTML = "距离" + future + "还有:";  
  33. document.getElementById("d").innerHTML = Math.floor(center / 1000 / 60 / 60 / 24) + "天";  
  34. document.getElementById("h").innerHTML = Math.floor(center / 1000 / 60 / 60 % 24) + "时";  
  35. document.getElementById("m").innerHTML = Math.floor(center / 1000 / 60 % 60) + "分";  
  36. document.getElementById("s").innerHTML = Math.floor(center / 1000 % 60) + "秒";  
  37. setTimeout(count, 1000);  
  38. else {  
  39. alert("请输入当前时间以后的日期!");  
  40. }  
  41. }  
  42. </script>  
  43. </html>  
avatar
  • 本文由 发表于 2018年12月24日12:33:00
  • 转载请注明:javascript计算未来时间距离当前时间的时长 - https://addadd.cn/2018/1837.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: