本文介绍如何通过 javascript 基于日期动态展示每日一句名言，避免固定时间间隔导致的错位问题，确保每天仅显示唯一确定的语句，并支持无限循环与可维护性。
本文介绍如何通过 javascript 基于日期动态展示每日一句名言，避免固定时间间隔导致的错位问题，确保每天仅显示唯一确定的语句，并支持无限循环与可维护性。
要让网页每天自动展示一句新名言（而非按固定毫秒间隔轮播），关键在于将显示逻辑与真实日期绑定，而非依赖 setTimeout 的累积计时——原代码中 INTERVAL = 86400000（即 24 小时）配合 forEach + setTimeout 的方式，本质是启动一个长达数天的预设轮播队列，不仅无法保证“每天零点切换”，还会因页面未持续运行（如关闭浏览器、设备休眠）而彻底失效。
✅ 正确做法：根据当前日期计算索引，每日唯一确定
以下为优化后的完整实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Quote Widget</title>
<style>
.widget {
padding: 5px 15px;
color: #C93F79;
text-align: center;
max-width: 95%;
margin: 2rem auto;
font-variant-caps: petite-caps;
font-size: 1.8rem;
line-height: 1.4;
}
.widget-wrapper {
width: 95%;
min-height: 100px;
background:
linear-gradient(to right, pink 4px, transparent 4px) 0 0,
linear-gradient(to right, pink 4px, transparent 4px) 0 100%,
linear-gradient(to left, pink 4px, transparent 4px) 100% 0,
linear-gradient(to left, pink 4px, transparent 4px) 100% 100%,
linear-gradient(to bottom, pink 4px, transparent 4px) 0 0,
linear-gradient(to bottom, pink 4px, transparent 4px) 100% 0,
linear-gradient(to top, pink 4px, transparent 4px) 0 100%,
linear-gradient(to top, pink 4px, transparent 4px) 100% 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="widget-wrapper">
<div class="widget" id="widget">Loading...</div>
</div>
<script>
const quotes = [
"Self-care is not a luxury; it's a necessity.",
"I am in competition with no one. I have no desire to play the game of being better than anyone. I am simply trying to be better than the person I was yesterday.",
"How you care for yourself is how you care for the world.",
"Every day it gets a little easier... But you gotta do it every day—that's the hard part. But it does get easier.",
"Discipline is the highest form of self-care.", // 修正原文拼写错误
"How you spend your time defines who you become.",
"Most people overestimate what they can do in one year and underestimate what they can do in ten years.",
"A goal without a plan is just a wish.",
"Every second counts.",
"There ain't nothing but today.",
"The more you fulfill your goals, the more you learn to trust yourself.",
"Every decision you make casts a vote for the person you want to be.",
"Twenty years from now, you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover."
];
// ✅ 核心逻辑：基于当前日期（年/月/日）生成稳定、可复现的索引
function getTodayQuote() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 1–12
const day = now.getDate(); // 1–31
// 使用简单但可靠的哈希：(year × 10000 + month × 100 + day) % quotes.length
const hash = (year * 10000 + month * 100 + day) % quotes.length;
return quotes[hash];
}
// 渲染到页面
document.getElementById('widget').textContent = getTodayQuote();
// ? 可选：每小时检查一次（防止用户长时间不刷新），确保日期变更后及时更新
setInterval(() => {
const currentQuote = document.getElementById('widget').textContent;
const todayQuote = getTodayQuote();
if (currentQuote !== todayQuote) {
document.getElementById('widget').textContent = todayQuote;
}
}, 60 * 60 * 1000); // 每小时检查一次
</script>
</body>
</html>? 关键改进说明：
- 去除了不可靠的 setTimeout 队列：不再依赖连续运行的定时器，彻底解决页面关闭/休眠导致的同步失效问题；
- 索引由日期唯一决定：year×10000 + month×100 + day 保证每天生成相同整数，取模后稳定映射到数组索引，天然支持循环；
- 轻量级实时校验：setInterval 每小时比对一次，兼顾准确性与性能，用户无需手动刷新即可响应新一天；
- 修复明显笔误：如 "Displicine" → "Discipline"，提升专业度；
- 增强可维护性：新增名言只需追加到 quotes 数组，逻辑自动适配。
? 进阶提示：如需跨时区统一（例如全球用户都以 UTC 零点切换），可将 new Date() 替换为 new Date(new Date().toUTCString().slice(0, -4)) 获取 UTC 日期对象。
这套方案简洁、健壮、无外部依赖，适用于静态站点、个人博客或嵌入式小部件，真正实现「所见即当日」的可靠每日名言体验。
