通过使用第三方API接口，我们可以方便的给WordPress添加动态时钟与温馨问候语提示方法，能够大大增强用户体验。
添加动态时钟与温馨问候语提示教程
<div class="greeting-container">
<div class="clock-face">
<div class="clock-time" id="clock-time"></div>
</div>
<div class="greeting-text">
<div class="greeting" id="greeting"></div>
<div class="tip" id="tip"></div>
</div>
</div>
<style>
.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;
}
</style>
<script>
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);
});
</script>
|
