如何实现每日名言自动切换？修复现有代码轮换异常问题

问题现状 #

代码尝试实现每24小时自动切换名言并循环的功能，但运行时名言始终停留在同一条，无法正常切换。

问题原因 #

原代码逻辑存在定时器叠加冲突：

• displayQuote函数每次执行都会立即将内容重置为第一条名言，同时为所有名言设置了延迟执行的定时器
• displayWidget会在一轮名言周期结束后再次调用displayQuote，导致新的定时器与旧定时器冲突，内容被强制重置回第一条

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote</title>

    <style>
        .widget {
            padding: 5px 5px ;
            color: #C93F79;
            text-align: center;
            max-width: 95%;
            margin: auto;
            font-variant-caps: petite-caps;
            font-size: 2em;
        }

        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>
</head>
<body>
    <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",
    "How you spend your time defines who you are.",
    "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.",
];

const INTERVAL = 86400000; // 24小时的毫秒数
let currentIndex = 0;
const widget = document.getElementById('widget');

// 显示当前索引的名言，并更新索引
function displayQuote() {
    widget.innerHTML = quotes[currentIndex];
    // 索引递增，取模实现循环
    currentIndex = (currentIndex + 1) % quotes.length;
}

// 启动循环切换
function startQuoteCycle() {
    // 先显示第一条
    displayQuote();
    // 每24小时切换一次
    setInterval(displayQuote, INTERVAL);
}

startQuoteCycle();
</script>
</body>
</html>

修改说明 #

• 新增currentIndex变量追踪当前显示的名言位置，通过取模运算(currentIndex + 1) % quotes.length实现循环
• 重写displayQuote函数，直接操作DOM显示当前名言并更新索引，避免多定时器冲突
• 使用setInterval实现稳定的定时切换，逻辑更简洁可靠
• 修复了原名言中的拼写错误（Displicine → Discipline，aint → ain't，补充了不完整的名言内容）

内容的提问来源于stack exchange，提问作者Supersasha