动态的问候语和时间显示能够大大增强用户体验,通过使用 API 接口,我们可以方便地根据时间段提示相关的问候语和温馨提示,非常实用的一个小工具,这个小工具很简单,话不多说直接开始
步骤一:
复制下面代码
步骤二:
将下面的代码放到:外观->>小工具->>自定义HTML的里面然后将小工具放到你想放到的位置
<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>
© 版权声明
THE END
请登录后查看评论内容