HTML+CSS+JavaScript实现动态数字时钟-明暗主题！！附源码！！

效果展示



HTML

1. <!DOCTYPE html>
   
2. <!-- Coding by CodingLab | www.codinglabweb.com-->
   
3. <html lang="en" dir="ltr">
   
4.   <head>
   
5.     <meta charset="UTF-8">
   
6.     <title> 动态数字时钟</title>
   
7.     <link rel="stylesheet" href="style.css">
   
8.     <!-- Fontawesome CDN Link -->
   
9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
   
10.    </head>
    
11. <body>
    
12.   <section>
    
13.     <div class="container">
    
14.       <div class="icons">
    
15.         <i class="fas fa-moon"></i>
    
16.         <i class="fas fa-sun"></i>
    
17.       </div>
    
18.       <div class="time">
    
19.         <div class="time-colon">
    
20.           <div class="time-text">
    
21.             <span class="num hour_num">08</span>
    
22.             <span class="text">Hours</span>
    
23.           </div>
    
24.           <span class="colon">:</span>
    
25.         </div>
    
26.         <div class="time-colon">
    
27.           <div class="time-text">
    
28.             <span class="num min_num">45</span>
    
29.             <span class="text">Minutes</span>
    
30.           </div>
    
31.           <span class="colon">:</span>
    
32.         </div>
    
33.         <div class="time-colon">
    
34.           <div class="time-text">
    
35.             <span class="num sec_num">06</span>
    
36.             <span class="text">Seconds</span>
    
37.           </div>
    
38.           <span class="am_pm">AM</span>
    
39.         </div>
    
40.       </div>
    
41.     </div>
    
42.   </section>
    
43.   <script>
    
44.   let section = document.querySelector("section"),
    
45.   icons = document.querySelector(".icons");
    
46.   icons.onclick = ()=>{
    
47.     section.classList.toggle("dark");
    
48.   }
    
49.   // creating a function and calling it in every seconds
    
50.   setInterval(()=>{
    
51.     let date = new Date(),
    
52.     hour = date.getHours(),
    
53.     min = date.getMinutes(),
    
54.     sec = date.getSeconds();
    
55.     let d;
    
56.     d = hour < 12 ? "AM" : "PM"; //if hour is smaller than 12, than its value will be AM else its value will be pm
    
57.     hour = hour > 12 ? hour - 12 : hour; //if hour value is greater than 12 than 12 will subtracted ( by doing this we will get value till 12 not 13,14 or 24 )
    
58.     hour = hour == 0 ? hour = 12 : hour; // if hour value is  0 than it value will be 12
    
59.     // adding 0 to the front of all the value if they will less than 10
    
60.     hour = hour < 10 ? "0" + hour : hour;
    
61.     min = min < 10 ? "0" + min : min;
    
62.     sec = sec < 10 ? "0" + sec : sec;
    
63.     document.querySelector(".hour_num").innerText = hour;
    
64.     document.querySelector(".min_num").innerText = min;
    
65.     document.querySelector(".sec_num").innerText = sec;
    
66.     document.querySelector(".am_pm").innerText = d;
    
67.   }, 1000); // 1000 milliseconds = 1s
    
68.   </script>
    
69. </body>
    
70. </html>

复制代码

CSS

1. /* Google fonts import link */
   
2. @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
   
3. *{
   
4.   margin: 0;
   
5.   padding: 0;
   
6.   box-sizing: border-box;
   
7.   font-family: 'Orbitron', sans-serif;
   
8.   transition: all 0.4s ease;
   
9. }
   
10. section{
    
11.   min-height: 100vh;
    
12.   width: 100%;
    
13.   display: flex;
    
14.   align-items: center;
    
15.   justify-content: center;
    
16.   background: #F0F8FF;
    
17.   padding: 0 20px;
    
18. }
    
19. section.dark{
    
20.   background: #24292D;
    
21. }
    
22. section .container{
    
23.   display: flex;
    
24.   align-items center;
    
25.   justify-content: center;
    
26.   height: 220px;
    
27.   max-width: 560px;
    
28.   width: 100%;
    
29.   background: #fff;
    
30.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    
31.   border-radius: 12px;
    
32.   position: relative;
    
33. }
    
34. section.dark .container{
    
35.   background: #323840;
    
36. }
    
37. section .container .icons i{
    
38.   position: absolute;
    
39.   right: 17px;
    
40.   top: 17px;
    
41.   height: 30px;
    
42.   width: 30px;
    
43.   background: #24292D;
    
44.   color: #fff;
    
45.   text-align: center;
    
46.   line-height: 30px;
    
47.   border-radius: 50%;
    
48.   font-size: 14px;
    
49.   cursor: pointer;
    
50. }
    
51. section.dark .container .icons i{
    
52.   background: #fff;
    
53.   color: #323840;
    
54. }
    
55. .container .icons i.fa-sun{
    
56.   opacity: 0;
    
57.   pointer-events: none;
    
58. }
    
59. section.dark .container .icons i.fa-sun{
    
60.   opacity: 1;
    
61.   pointer-events: auto;
    
62.   font-size: 16px;
    
63. }
    
64. section .container .time{
    
65.   display: flex;
    
66.   align-items: center;
    
67. }
    
68. .container .time .time-colon{
    
69.   display: flex;
    
70.   align-items: center;
    
71.   position: relative;
    
72. }
    
73. .time .time-colon .am_pm{
    
74.   position: absolute;
    
75.   top: 0;
    
76.   right: -50px;
    
77.   font-size: 20px;
    
78.   font-weight: 700;
    
79.   letter-spacing: 1px;
    
80. }
    
81. section.dark .time .time-colon .am_pm{
    
82.   color: #fff;
    
83. }
    
84. .time .time-colon .time-text{
    
85.   height: 100px;
    
86.   width: 100px;
    
87.   display: flex;
    
88.   align-items: center;
    
89.   flex-direction: column;
    
90.   justify-content: center;
    
91.   background: #F0F8FF;
    
92.   border-radius: 6px;
    
93.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    
94. }
    
95. section.dark .time .time-colon .time-text{
    
96.   background: #24292D;
    
97. }
    
98. .time .time-colon .time-text,
    
99. .time .time-colon .colon{
    
100.   font-size: 35px;
     
101.   font-weight: 600;
     
102. }
     
103. section.dark .time .time-text .num,
     
104. section.dark .time .colon{
     
105.   color: #fff;
     
106. }
     
107. .time .time-colon .colon{
     
108.   font-size: 40px;
     
109.   margin: 0 10px;
     
110. }
     
111. .time .time-colon .time-text .text{
     
112.   font-size: 12px;
     
113.   font-weight: 700;
     
114.   letter-spacing: 2px;
     
115. }
     
116. section.dark  .time .time-colon .text{
     
117.   color: #fff;
     
118. }

复制代码