1. 功能介绍
- 实时时间显示（时:分:秒）
- 智能问候语（根据时段显示"早上好"等）
- 公历日期和星期
- 农历日期转换
- 随机励志短语
- 自适应布局（适合各种屏幕大小）
2. 如何在博客中使用
WordPress 使用方法：
- 在文章/页面中：
- 如果你的主题支持自定义 HTML，直接粘贴代码到 HTML 编辑器中
- 或者使用"自定义 HTML"区块，将代码粘贴进去
- 在侧边栏中：
- 进入 外观 → 小工具
- 添加"自定义 HTML"小工具
- 粘贴代码
其他博客平台：
- 独立博客：直接插入到模板文件中
- 动态博客：放在 widget 或边栏模块中
- 静态博客：插入到 markdown 或模板文件中
3. 代码依赖
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">4. 自定义修改建议
1修改样式：
<style>
/* 修改时钟字体大小 */
.clock-responsive {
font-size: clamp(1.2rem, 5vw, 2.5rem);
}
/* 修改其他文字大小 */
.text-responsive {
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}
</style>
2.修改励志短语：
const motivationPhrases = [
"你的自定义短语1",
"你的自定义短语2",
// ...添加更多
];
3修改更新频率：
setInterval(updateClock, 1000); // 可以改为其他数值
5. 性能说明
- 完全客户端运行，不占用服务器资源
- 代码轻量，不影响页面加载速度
- 自适应设计，适合各种设备
6. 使用建议
- 放置位置：
- 建议放在侧边栏
- 或者文章页面的顶部/底部
- 避免放在正文中间，影响阅读
- 样式调整：
- 确保与博客主题风格协调
- 可以调整颜色和字体大小
- 建议保持简洁美观
- 注意事项：
- 确保博客平台支持自定义 HTML/JavaScript
- 检查是否与其他插件冲突
- 测试在不同设备上的显示效果
7. 常见问题解决
- 时间不准确：
- 检查用户设备时间是否准确
- 已经包含了北京时间转换
- 样式显示异常：
- 检查是否加载了所有依赖
- 调整容器大小和响应式设置
- 农历显示问题：
- 包含完整的农历转换算法
- 支持节气和闰月
使用方法：
完整版代码：
<div id="clock-container" class="w-full h-full bg-glass rounded-xl shadow-lg p-2 md:p-4 transition-time border border-white/50 box-border">
<div class="text-center mb-2">
<h2 class="font-medium mb-1 text-responsive tracking-wide">今日信息</h2>
</div>
<div id="time-display" class="clock-responsive font-bold text-center mb-1 text-shadow transition-time">
00:00:00
</div>
<div id="period-display" class="text-primary text-responsive font-medium text-center mb-2 flex items-center justify-center">
<i class="fa fa-sun-o mr-2"></i> 上午
</div>
<div id="date-display" class="text-responsive text-center mb-2 flex items-center justify-center">
<i class="fa fa-calendar-o mr-2"></i> 2023年01月01日 星期日
</div>
<div id="lunar-display" class="text-responsive text-center mb-2 flex items-center justify-center">
<i class="fa fa-moon-o mr-2"></i> 农历腊月初一
</div>
<div id="motivation-display" class="italic text-responsive text-center p-2 bg-white/80 rounded-lg border min-h-[2.5em] flex items-center justify-center shadow-sm">
<p>励志短语将在这里显示...</p>
</div>
<div class="mt-2 text-center text-xs text-gray-400">
<i class="fa fa-refresh fa-spin"></i> 每秒自动更新
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.clock-responsive { font-size: clamp(1.2rem, 5vw, 2.5rem); }
.text-responsive { font-size: clamp(0.9rem, 2.5vw, 1.1rem); }
.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
<script>
// 农历数据和短语
const lunarInfo = [
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0
];
const lunarMonthName = ['正月','二月','三月','四月','五月','六月','七月','八月','九月','十月','冬月','腊月'];
const lunarDayName = ['初一','初二','初三','初四','初五','初六','初七','初八','初九','初十',
'十一','十二','十三','十四','十五','十六','十七','十八','十九','二十',
'廿一','廿二','廿三','廿四','廿五','廿六','廿七','廿八','廿九','三十'];
const motivationPhrases = [
"每一个不曾起舞的日子，都是对生命的辜负。——尼采",
"成功不是终点，失败也并非末日，重要的是继续前进的勇气。——温斯顿·丘吉尔",
"你今天受的苦，吃的亏，担的责，扛的罪，忍的痛，到最后都会变成光，照亮你的路。——鲁迅",
"生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方。——欧内斯特·海明威",
"只有在你工作堆积如山时，你才可能享受闲暇。——亨利·沃兹沃思·朗费罗",
"人生最大的光荣，不在于永不失败，而在于能屡仆屡起。——拿破仑·希尔",
"成功的关键在于相信自己有成功的能力。——拿破仑·希尔",
"你若要喜爱你自己的价值，你就得给世界创造价值。——歌德",
"伟大的作品不是靠力量，而是靠坚持来完成的。——塞缪尔·约翰逊",
"生活不可能像你想象得那么好，但也不会像你想象得那么糟。人的脆弱和坚强都超乎自己的想象。——莫泊桑",
"人的生命似洪水在奔流，不遇着岛屿、暗礁，难以激起美丽的浪花。——奥斯特洛夫斯基",
"一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是在流浪。——三毛",
"世界上最快乐的事，莫过于为理想而奋斗。——苏格拉底",
"我从来不把安逸和快乐看作是生活目的本身——这种伦理基础，我叫它猪栏的理想。——爱因斯坦",
"如果我们过于爽快地承认失败，就可能使自己发觉不了我们非常接近于正确。——卡尔·波普尔",
"只有一条路不能选择——那就是放弃的路；只有一条路不能拒绝——那就是成长的路。——周弘",
"在一个崇高的目标支持下，不停地工作，即使慢，也一定会获得成功。——爱因斯坦",
"任何业绩的质变都来自于量变的积累。——佚名",
"昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用。——凯·里昂",
"没有口水与汗水，就没有成功的泪水。——佚名"
];
// 获取北京时间
function getBeijingTime() {
const now = new Date();
const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
return new Date(utc + (3600000 * 8));
}
// 获取农历日期
function getLunarDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
function lunar(year, month, day) {
let i, leap = 0, temp = 0;
const baseDate = new Date(1900, 0, 31);
let offset = (date - baseDate) / 86400000;
for (i = 1900; i < 2100 && offset > 0; i++) {
temp = getYearDays(i);
offset -= temp;
}
if (offset < 0) {
offset += temp;
i--;
}
const lunarYear = i;
leap = getLeapMonth(i);
let isLeap = false;
for (i = 1; i < 13 && offset > 0; i++) {
if (leap > 0 && i === (leap + 1) && !isLeap) {
--i;
isLeap = true;
temp = getLeapMonthDays(lunarYear);
} else {
temp = getMonthDays(lunarYear, i);
}
if (isLeap && i === (leap + 1)) isLeap = false;
offset -= temp;
}
if (offset === 0 && temp === 30) {
if (i === leap + 1) {
if (isLeap) {
isLeap = false;
} else {
isLeap = true;
--i;
}
} else {
--i;
}
}
if (offset < 0) {
offset += temp;
--i;
}
const lunarMonth = i;
const lunarDay = offset + 1;
return {
year: lunarYear,
month: lunarMonth,
day: lunarDay,
isLeap: isLeap
};
}
function getYearDays(y) {
let i, sum = 348;
for (i = 0x8000; i > 0x8; i >>= 1) {
sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
}
return sum + getLeapMonthDays(y);
}
function getLeapMonthDays(y) {
if (getLeapMonth(y)) {
return (lunarInfo[y - 1900] & 0x10000) ? 30 : 29;
} else {
return 0;
}
}
function getLeapMonth(y) {
return lunarInfo[y - 1900] & 0xf;
}
function getMonthDays(y, m) {
return (lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29;
}
const lunarData = lunar(year, month, day);
let lunarMonthStr = lunarMonthName[lunarData.month - 1];
if (lunarData.isLeap) {
lunarMonthStr = '闰' + lunarMonthStr;
}
const lunarDayStr = lunarDayName[lunarData.day - 1];
return `${lunarMonthStr}${lunarDayStr}`;
}
// 更新时间显示
function updateClock() {
const now = getBeijingTime();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
// 时段
let period = '凌晨';
let periodIcon = 'fa-moon-o';
if (hours >= 5 && hours < 7) { period = '清晨'; periodIcon = 'fa-sun-o'; }
else if (hours >= 7 && hours < 9) { period = '早上'; periodIcon = 'fa-sun-o'; }
else if (hours >= 9 && hours < 11) { period = '上午'; periodIcon = 'fa-sun-o'; }
else if (hours >= 11 && hours < 13) { period = '中午'; periodIcon = 'fa-sun-o'; }
else if (hours >= 13 && hours < 17) { period = '下午'; periodIcon = 'fa-sun-o'; }
else if (hours >= 17 && hours < 19) { period = '傍晚'; periodIcon = 'fa-sun-o'; }
else if (hours >= 19 && hours < 23) { period = '晚上'; periodIcon = 'fa-moon-o'; }
// 星期
const weekdays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
const weekday = weekdays[now.getDay()];
// 日期字符串
const dateString = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${weekday}`;
// 农历
const lunarDate = getLunarDate(now);
// 更新DOM
document.getElementById('time-display').innerText = `${hours}:${minutes}:${seconds}`;
document.getElementById('period-display').innerHTML = `<i class="fa ${periodIcon} mr-2"></i> ${period}`;
document.getElementById('date-display').innerHTML = `<i class="fa fa-calendar-o mr-2"></i> ${dateString}`;
document.getElementById('lunar-display').innerHTML = `<i class="fa fa-moon-o mr-2"></i> 农历 ${lunarDate}`;
// 每小时更换励志短语
if (seconds === "00") {
const randomIndex = Math.floor(Math.random() * motivationPhrases.length);
document.getElementById('motivation-display').innerHTML = `<p>${motivationPhrases[randomIndex]}</p>`;
}
// 主题切换（可选，略）
}
setInterval(updateClock, 1000);
updateClock();
document.addEventListener('DOMContentLoaded', () => {
const randomIndex = Math.floor(Math.random() * motivationPhrases.length);
document.getElementById('motivation-display').innerHTML = `<p>${motivationPhrases[randomIndex]}</p>`;
});
</script>
声明：该资源仅供学习和研究传播，大家请在下载后24小时内删除，一切关于该资源商业行为与Python达人-达人源码网(bgspz.top)源码无关。
本站所有资源全部收集于互联网，分享目的仅供大家学习与参考，如有侵权，请联系1685698671@qq.com及时删除！
本站资源不保证其完整性和安全性，下载后请自行检测安全，在使用过程中出现的任何问题均与本站无关，请自行处理！
请勿将该软件程序进行商业交易、转载、违法运营 等行为，该软件只为研究、学习所提供，该软件程序使用后发生的一切问题与本站无关。
若本程序源码侵犯了您的权益，请及时联系我们予以删除！
本程序仅供研究学习使用,切勿商用以及违法使用!
评论(0)