时间样式带文案的html代码

china0396

  padding: 20px;时间位置直接调

1. <div class="greeting-container">
   
2.     <div class="clock-face">
   
3.         <div class="clock-time" id="clock-time"></div>
   
4.     </div>
   
5.     <div class="greeting-text">
   
6.         <div class="greeting" id="greeting"></div>
   
7.         <div class="tip" id="tip"></div>
   
8.     </div>
   
9. </div>
   
10. <style>
    
11.     .greeting-container {
    
12.         width: 100%;
    
13.         height: 150px;
    
14.         background-color: #f5f5f5;
    
15.         border-radius: 10px;
    
16.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
17.         display: flex;
    
18.         align-items: center;
    
19.         justify-content: space-between;
    
20.         padding: 20px;
    
21.         font-family: Arial, sans-serif;
    
22.     }
    
23.     .clock-face {
    
24.         width: 100px;
    
25.         height: 100px;
    
26.         background-color: #fff;
    
27.         border-radius: 50%;
    
28.         display: flex;
    
29.         align-items: center;
    
30.         justify-content: center;
    
31.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
32.     }
    
33.     .clock-time {
    
34.         font-size: 24px;
    
35.         font-weight: bold;
    
36.         color: #333;
    
37.     }
    
38.     .greeting-text {
    
39.         flex: 1;
    
40.         margin-left: 20px;
    
41.     }
    
42.     .greeting {
    
43.         font-size: 20px;
    
44.         color: #007bff;
    
45.         font-weight: bold;
    
46.         margin-bottom: 10px;
    
47.     }
    
48.     .tip {
    
49.         font-size: 16px;
    
50.         color: #666;
    
51.         line-height: 1.5;
    
52.     }
    
53. </style>
    
54. <script>
    
55.     function updateClock() {
    
56.         const now = new Date();
    
57.         const hours = now.getHours().toString().padStart(2, '0');
    
58.         const minutes = now.getMinutes().toString().padStart(2, '0');
    
59.         const seconds = now.getSeconds().toString().padStart(2, '0');
    
60.         document.getElementById('clock-time').textContent = `${hours}:${minutes}:${seconds}`;
    
61.     }
    
62. 
    
63.     function updateGreeting() {
    
64.         fetch('https://api.ahfi.cn/api/getGreetingMessage?type=json')
    
65.             .then(response => response.json())
    
66.             .then(data => {
    
67.                 document.getElementById('greeting').textContent = data.data.greeting;
    
68.                 document.getElementById('tip').textContent = data.data.tip;
    
69.             })
    
70.             .catch(error => console.error('Error fetching the greeting message:', error));
    
71.     }
    
72. 
    
73.     document.addEventListener('DOMContentLoaded', function() {
    
74.         updateClock();
    
75.         updateGreeting();
    
76.         setInterval(updateClock, 1000);
    
77.         setInterval(updateGreeting, 60000);
    
78.     });
    
79. </script>

复制代码