3.倒计时.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. span {
  9. color: red;
  10. }
  11. h1 {
  12. width: 700px;
  13. height: 180px;
  14. line-height: 180px;
  15. margin: 100px auto;
  16. text-align: center;
  17. border: 4px solid purple;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>
  23. 倒计时:<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒
  24. </h1>
  25. <script>
  26. // var a = 3.6;
  27. // var x = new Number()
  28. // parseInt() 取整
  29. // parseFloat() 取浮点数
  30. // console.log(parseFloat(a));
  31. function showTime() {
  32. var spans = document.querySelectorAll("span");
  33. var startTime = new Date().getTime();
  34. var endTime = new Date("2024-06-30 12:00:00").getTime();
  35. var diffTime = (endTime - startTime) / 1000;
  36. var day = parseInt(diffTime / 60 / 60 / 24);
  37. var hour = parseInt(diffTime / 60 / 60 % 24);
  38. var minutes = parseInt(diffTime / 60 % 60);
  39. var second = parseInt(diffTime % 60) ;
  40. spans[0].innerHTML = day;
  41. spans[1].innerHTML = hour;
  42. spans[2].innerHTML = minutes;
  43. spans[3].innerHTML = second;
  44. }
  45. setInterval(showTime,1000)
  46. </script>
  47. </body>
  48. </html>