子比主题 – 侧栏动态时钟与问候语小工具

飞流 · 发表于 2025-10-8 21:02:27

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

一个实用又美观的动态时钟和问候语提醒功能，不仅为博客增添人情味，还能与子比主题的深色模式完美兼容！

[h1]代码部署[/h1]
直接将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML代码即可！

<div class="dynamic-greeting">
<div class="time-section">
<div class="time-display">
<span id="hours">00</span>
<span class="colon">:</span>
<span id="minutes">00</span>
<span class="colon">:</span>
<span id="seconds">00</span>
</div>
<div class="date-display" id="date"></div>
</div>
<div class="greeting-section">
<div class="greeting-text" id="greeting"></div>
<div class="greeting-tip" id="tip"></div>
</div>
</div>
<style>
.dynamic-greeting {background: linear-gradient(145deg, #ffffff, #f0f0f0);border-radius: 15px;padding: 20px;box-shadow: 5px 5px 15px rgba(0,0,0,0.1), -5px -5px 15px rgba(255,255,255,0.8);margin: 20px 0;transition: all 0.3s ease;}.dynamic-greeting:hover {transform: translateY(-2px);box-shadow: 7px 7px 20px rgba(0,0,0,0.12), -7px -7px 20px rgba(255,255,255,0.9);}.time-section {text-align: center;margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid rgba(0,0,0,0.05);}.time-display {font-size: 2.5em;font-weight: 700;color: #007AFF;font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);}.time-display .colon {animation: blink 1s infinite;opacity: 1;}@keyframes blink {50% {opacity: 0;}}.date-display {font-size: 1em;color: #666;margin-top: 5px;}.greeting-section {padding: 10px;background: rgba(255,255,255,0.7);border-radius: 10px;}.greeting-text {font-size: 1.2em;color: #333;font-weight: 600;margin-bottom: 8px;}.greeting-tip {font-size: 0.9em;color: #666;line-height: 1.5;}body.dark-theme .dynamic-greeting {background: linear-gradient(145deg, #2d2d2d, #1a1a1a);box-shadow: 5px 5px 15px rgba(0,0,0,0.3), -5px -5px 15px rgba(255,255,255,0.05);}body.dark-theme .time-display {color: #0A84FF;}body.dark-theme .greeting-section {background: rgba(0,0,0,0.2);}body.dark-theme .greeting-text {color: #fff;}body.dark-theme .greeting-tip, body.dark-theme .date-display {color: #999;}
</style>
<script>
function updateTime(){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('hours').textContent=hours;document.getElementById('minutes').textContent=minutes;document.getElementById('seconds').textContent=seconds;const options={weekday:'long',year:'numeric',month:'long',day:'numeric'};document.getElementById('date').textContent=now.toLocaleDateString('zh-CN',options)}function updateGreeting(){fetch('https://api.ahfi.cn/api/getGreetingMessage?type=json').then(response=>response.json()).then(data=>{if(data.code===200){document.getElementById('greeting').textContent=data.data.greeting;document.getElementById('tip').textContent=data.data.tip}}).catch(error=>{console.error('获取问候语失败:',error);const hour=new Date().getHours();let defaultGreeting='';if(hour<6)defaultGreeting='凌晨好';else if(hour<11)defaultGreeting='早上好';else if(hour<14)defaultGreeting='中午好';else if(hour<18)defaultGreeting='下午好';else defaultGreeting='晚上好';document.getElementById('greeting').textContent=defaultGreeting;document.getElementById('tip').textContent='愿你今天心情愉快！'})}document.addEventListener('DOMContentLoaded',function(){updateTime();updateGreeting();setInterval(updateTime,1000);setInterval(updateGreeting,60000);if(document.documentElement.getAttribute('data-theme')==='dark'){document.body.classList.add('dark-theme')}});
</script>

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 侧栏动态时钟与问候语小工具

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn