2025春节大年初一倒计时代码

admin

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>2025春节大年初一倒计时</title>
   
7.     <style>
   
8.         body {
   
9.             font-family: 'Arial', sans-serif;
   
10.             background: linear-gradient(to right, #ff7e5f, #feb47b);
    
11.             color: white;
    
12.             text-align: center;
    
13.             padding: 50px;
    
14.         }
    
15.         h1 {
    
16.             font-size: 3em;
    
17.             margin-bottom: 20px;
    
18.         }
    
19.         #countdown {
    
20.             font-size: 2em;
    
21.             margin-bottom: 20px;
    
22.         }
    
23.         .container {
    
24.             display: inline-block;
    
25.             padding: 20px;
    
26.             border-radius: 10px;
    
27.             background: rgba(0, 0, 0, 0.5);
    
28.         }
    
29.         .time-box {
    
30.             display: inline-block;
    
31.             margin: 0 10px;
    
32.             padding: 10px;
    
33.             background: rgba(255, 255, 255, 0.2);
    
34.             border-radius: 5px;
    
35.         }
    
36.         .time-box span {
    
37.             display: block;
    
38.             font-size: 1.5em;
    
39.         }
    
40.         .time-box b {
    
41.             font-size: 2em;
    
42.         }
    
43.     </style>
    
44. </head>
    
45. <body>
    
46.     <div class="container">
    
47.         <h1>2025春节大年初一倒计时</h1>
    
48.         <div id="countdown">
    
49.             <div class="time-box"><span>天</span><b id="days"></b></div>
    
50.             <div class="time-box"><span>时</span><b id="hours"></b></div>
    
51.             <div class="time-box"><span>分</span><b id="minutes"></b></div>
    
52.             <div class="time-box"><span>秒</span><b id="seconds"></b></div>
    
53.         </div>
    
54.     </div>
    
55. 
    
56.     <script>
    
57.         function updateCountdown() {
    
58.             const targetDate = new Date('January 29, 2025 00:00:00').getTime(); // 修改为2025年新年
    
59.             const now = new Date().getTime();
    
60.             const timeDifference = targetDate - now;
    
61. 
    
62.             const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    
63.             const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    
64.             const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    
65.             const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
    
66. 
    
67.             document.getElementById('days').innerText = days;
    
68.             document.getElementById('hours').innerText = hours;
    
69.             document.getElementById('minutes').innerText = minutes;
    
70.             document.getElementById('seconds').innerText = seconds;
    
71.         }
    
72. 
    
73.         setInterval(updateCountdown, 1000);
    
74.         updateCountdown();
    
75.     </script>
    
76. </body>
    
77. </html>
    

复制代码

klxf

很应景哇~时光匆匆，面向未来，活好当下！

醉美水芙蓉

欣赏老大春节倒计时代码！

夏艳妍

我表示压力很大

1643091610

非常不错，感谢分享！

夏艳妍

必须支持。。。。。。。