.greeting-container { width: 100%; height: 150px; background-color: #f5f5f5; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; padding: 20px; font-family: Arial, sans-serif; } .clock-face { width: 100px; height: 100px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .clock-time { font-size: 24px; font-weight: bold; color: #333; } .greeting-text { flex: 1; margin-left: 20px; } .greeting { font-size: 20px; color: #007bff; font-weight: bold; margin-bottom: 10px; } .tip { font-size: 16px; color: #666; line-height: 1.5; } function updateClock() { const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); document.getElementById('clock-time').textContent = `${hours}:${minutes}:${seconds}`; } function updateGreeting() { fetch('https://api.ahfi.cn/api/getGreetingMessage?type=json') .then(response => response.json()) .then(data => { document.getElementById('greeting').textContent = data.data.greeting; document.getElementById('tip').textContent = data.data.tip; }) .catch(error => console.error('Error fetching the greeting message:', error)); } document.addEventListener('DOMContentLoaded', function() { updateClock(); updateGreeting(); setInterval(updateClock, 1000); setInterval(updateGreeting, 60000); });