使用setInterval修改数字实现计时器遇到问题求助

你的核心问题是只更新了变量值，但没有在数值变化后重新调用showNumbers来更新DOM内容。初始的showNumbers调用仅在页面加载时执行一次，之后setInterval里修改firstNumber后没有触发页面更新。

修改方案 #

把showNumbers的调用放到setInterval的回调里，确保每次数值变化后同步更新页面：

"use strict";

//Get Elements with Classes
let clock_hours_big = document.getElementsByClassName("clock__hours-big")[0];
let clock_hours_low = document.getElementsByClassName("clock__hours-low")[0];
let clock_seconds_big = document.getElementsByClassName("clock__seconds-big")[0];
let clock_seconds_low = document.getElementsByClassName("clock__seconds-low")[0];

//create Variables
let firstNumber = 0;
let secondNumber = 0;
let thirdNumber = 0;
let fourthNumber = 0;
let headline = "h1";

//change time of clock in function
let showNumbers = function(selectQuery, selectPosition, selectNumber) {
    let Position = selectPosition.querySelector(selectQuery);
    Position.textContent = parseInt(selectNumber);
}
let changeNumbers = function() {
    setInterval(function() {
        firstNumber = firstNumber + 1;
        // 每次数值更新后，调用showNumbers更新对应元素
        showNumbers(headline, clock_hours_big, firstNumber);
        
        // 额外补充：处理数字进位逻辑（比如0-9循环，满10进位）
        if (firstNumber >= 9) {
            firstNumber = 0;
            secondNumber += 1;
            showNumbers(headline, clock_hours_low, secondNumber);
            // 这里可以继续扩展小时满60进位到分钟等逻辑，根据你的计时器需求调整
        }
    }, 1000)
}

// 初始化页面显示
showNumbers(headline,clock_hours_big, firstNumber);
showNumbers(headline,clock_hours_low, secondNumber);
showNumbers(headline,clock_seconds_big, thirdNumber);
showNumbers(headline,clock_seconds_low, fourthNumber);
changeNumbers();

关键修改点说明 #

• 在setInterval的回调函数内，递增firstNumber后立即调用showNumbers，把新的数值同步到页面元素中。
• 补充了基础的进位逻辑，避免单个数字超过9的情况（你可以根据计时器的实际需求，继续扩展秒、分、小时的进位规则）。

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