1.倒计时.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  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. p {
  9. width: 600px;
  10. height: 300px;
  11. border: 1px solid #000;
  12. text-align: center;
  13. line-height: 300px;
  14. font-size: 36px;
  15. margin: 150px auto;
  16. }
  17. p span {
  18. color:red;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <p>倒计时:<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
  24. <script>
  25. function showTime() {
  26. var spans = document.querySelectorAll("span");
  27. var endTime = new Date('2025-5-1 12:00').getTime();
  28. var beginTime = Date.now();
  29. var diffTime = (endTime - beginTime) / 1000
  30. var days = parseInt(diffTime / 60 / 60 / 24);
  31. var hours = parseInt(diffTime / 60 / 60 % 24);
  32. var minutes = parseInt(diffTime / 60 % 60 );
  33. var seconds = parseInt(diffTime % 60 );
  34. spans[0].innerText = days;
  35. spans[1].innerText = hours;
  36. spans[2].innerText = minutes;
  37. spans[3].innerText = seconds;
  38. }
  39. setInterval(showTime,1000)
  40. </script>
  41. </body>
  42. </html>