如何实现每日自动轮换一句励志名言-js教程-PHP中文网

如何实现每日自动轮换一句励志名言

本文介绍如何通过 javascript 基于日期动态展示每日一句名言，避免固定时间间隔导致的错位问题，确保每天仅显示唯一确定的语句，并支持无限循环与可维护性。

本文介绍如何通过 javascript 基于日期动态展示每日一句名言，避免固定时间间隔导致的错位问题，确保每天仅显示唯一确定的语句，并支持无限循环与可维护性。

要让网页每天自动展示一句新名言（而非按固定毫秒间隔轮播），关键在于将显示逻辑与真实日期绑定，而非依赖 setTimeout 的累积计时——原代码中 INTERVAL = 86400000（即 24 小时）配合 forEach + setTimeout 的方式，本质是启动一个长达数天的预设轮播队列，不仅无法保证“每天零点切换”，还会因页面未持续运行（如关闭浏览器、设备休眠）而彻底失效。

✅ 正确做法：根据当前日期计算索引，每日唯一确定

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

AI Undetect

AI Undetect是一款用于检测并改写 AI 生成文本的反检测式文本处理工具。

下载



    <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><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>

? 关键改进说明：