如何实现每日自动更换励志语录的网页功能-js教程-PHP中文网

如何实现每日自动更换励志语录的网页功能

本文介绍如何通过 javascript 结合日期哈希算法，让网页每天显示一条唯一且可预测的励志语录，避免定时器误差与硬编码轮播缺陷，确保语录真正“按日切换”。

本文介绍如何通过 javascript 结合日期哈希算法，让网页每天显示一条唯一且可预测的励志语录，避免定时器误差与硬编码轮播缺陷，确保语录真正“按日切换”。

您当前的代码试图用 setTimeout 实现“每 24 小时切换一条语录”，但存在根本性逻辑错误：

INTERVAL = 86400000（即 24 小时毫秒数）被用于逐条延迟播放，导致第 1 条语录在页面加载后立即显示，第 2 条等待 24 小时，第 3 条再等 24 小时……整轮播需 quotes.length × 24 小时才完成一次循环，而非“每天换一句”；
更严重的是，setTimeout 依赖客户端本地时间与执行环境稳定性，页面未持续运行（如关闭标签页、休眠电脑）会导致计时中断，完全无法保证“每日一换”。

✅ 正确方案：基于日期计算索引，而非依赖定时器。
核心思路是——将当前日期（年/月/日）转换为一个稳定、可复现的数字，再对语录数组长度取模，得到当日唯一索引。这样无论用户何时访问、是否刷新页面、设备是否离线，只要日期相同，显示的语录就完全一致。

以下是优化后的完整实现：

Buzzy AI

一款AI视频创作工具，主要用于AI视频编辑工具，视频版的Photoshop，适合需要提升相关任务效率的用户。

下载



    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Daily Quote</title><style>
        .widget {
            padding: 5px 15px;
            color: #C93F79;
            text-align: center;
            max-width: 95%;
            margin: auto;
            font-variant-caps: petite-caps;
            font-size: 2em;
            line-height: 1.4;
        }
        div {
            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;
        }
    </style><div class="widget" id="widget"></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.", // 修正原拼写错误 "Displicine"
    "How you spend your time matters more than how much time you spend.",
    "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 getTodayIndex() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 1–12
    const day = now.getDate();         // 1–31
    // 使用质数加权求和，避免日期顺序相近导致索引重复（如 2024/1/1 vs 2024/1/2）
    const hash = (year * 17 + month * 19 + day * 23) % 1000000;
    return hash % quotes.length;
}

// 渲染今日语录
document.getElementById('widget').textContent = quotes[getTodayIndex()];
</script>

? 关键改进说明：