案例.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. <style>
  7. p {
  8. font-size: 36px;
  9. margin: 0 auto;
  10. text-align: center;
  11. line-height: 500px;
  12. }
  13. span {
  14. color: red;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <p>
  20. 倒计时:<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒
  21. </p>
  22. <script>
  23. function showTime() {
  24. var spans = document.querySelectorAll("span");
  25. var endTime = new Date("2024-6-30 12:00:00").getTime();
  26. var newTime = new Date().getTime();
  27. var diffTime = (endTime - newTime) / 1000;
  28. var day = parseInt(diffTime / 60 / 60 / 24);
  29. var hour = parseInt((diffTime / 60 / 60) % 24);
  30. var min = parseInt((diffTime / 60) % 60);
  31. var sen = parseInt(diffTime % 60);
  32. spans[0].innerText = day;
  33. spans[1].innerText = hour;
  34. spans[2].innerText = min;
  35. spans[3].innerText = sen;
  36. }
  37. setInterval(showTime, 1000);
  38. </script>
  39. </body>
  40. </html>