js中的倒计时器，有什么问题吗？

Question

我正在进行倒计时应用程序项目（番茄钟） 该应用程序不适合我，数学库的计算中的某些内容可能写得不正确，即使我认为它写得正确。

我附上了不起作用的代码以及整个应用程序的完整代码

这是我的全部代码，不需要 CSS

希望得到帮助:)）

let timer;

function startTimer() {
    const hours = document.getElementById("hours").value;
    const minutes = document.getElementById("minutes").value;
    const seconds = document.getElementById("seconds").value;

    let totalTime = (hours * 3600) + (minutes * 60) + (seconds); // sum all seconds

    if (totalTime <= 0) {
        alert('Please set a valid time before starting.');
        return;
    }

    document.getElementById("input-section").style.display = 'none';
    document.getElementById("display-section").style.display = 'flex';
    console.log(timer);
    document.title = ('Time To Go ' + timer);
    
    if (timer) {
        clearInterval(timer);
    }
    
    timer = setInterval(
        function() {
            if (totalTime <= 0) {
                clearInterval(timer);
                alert("Time's Up!!");
                return;
            }

            const displayHours = Math.floor(totalTime / 3600);
            const displayMinutes = Math.floor((totalTime % 3600) / 60);
            const displaySeconds = totalTime % 60;

            document.getElementById("displayHours").textContent = String(displayHours).padStart(2, '0');
            document.getElementById("displayMinutes").textContent = String(displayMinutes).padStart(2, '0');
            document.getElementById("displaySeconds").textContent = String(displaySeconds).padStart(2, '0');
            
            totalTime--;
        }, 1000);
}

function stopTimer() {
    if (timer) {
        clearInterval(timer);
    }
    
    document.getElementById("inputSection").style.display = 'flex';
    document.getElementById("displaySection").style.display = 'none';
}

<div class="container">
    <div class="header">Countdown Timer</div>

    <div class="input-section" id="input-section">
        <input type="number" id="hours" placeholder="hours" min="0">
        <input type="number" id="minutes" placeholder="minutes" min="0" max="59">
        <input type="number" id="seconds" placeholder="seconds" min="0" max="59">
        <button onclick="startTimer()">Start</button>
    </div>
    
    <div class="display-section" id="display-section">
        <span id="displayHours">00</span>
        <span id="displayminutes">00</span>
        <span id="displaySeconds">00</span>
        <button onclick="stopTimer()">Stop</button>
    </div>
</div>

我的问题是用 Math.floor 计算时间或其他东西

Answer 1

在 HTML 中，您有一个带有

id

的元素：

displayminutes

，但在 JavaScript 中，您尝试获取对：

displayMinutes

的引用，这会导致您当前收到的

textContent

错误。修复该错误至少会让计时器运行。

除此之外，您正在使用一些旧技术来设置事件处理程序，并且您正在使用内联样式，应尽可能避免这种情况。

请参阅下面重新编写的代码并阅读注释以了解详细信息。

// Get all your DOM references just once, not every time the function runs
const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
const seconds = document.getElementById("seconds");
const dispHours = document.getElementById("displayHours");
const dispMinutes = document.getElementById("displayMinutes");
const dispSeconds = document.getElementById("displaySeconds");
const inputSection = document.getElementById("input-section");
const outputSection = document.getElementById("output-section");
const toggleButton = document.querySelector("button");

let timer = null; // Always initialize your variables, even if its with null

// Set up your event handlers in JavaScript, not HTML
toggleButton.addEventListener("click", toggleTimer);

// This function will start and stop the timer
function toggleTimer() {   
    // Toggle the text on the button
    toggleButton.textContent = toggleButton.textContent === "Start" ? "Stop" : "Start";
    
    // If the clock is ticking, stop it
    if(toggleButton.textContent === "Start"){
      clearInterval(timer);
      inputSection.classList.remove("hidden");
      outputSection.classList.add("hidden"); 
      toggleButton.textContent === "Start";      
      return;
    }

    let totalTime = (hours.value * 3600) + (minutes.value * 60) + (seconds.value); // sum all seconds

    if (totalTime <= 0) {
        alert('Please set a valid time before starting.');
        return;
    }

    // Don't use inline styles. Just add/remove classes
    inputSection.classList.add("hidden");
    outputSection.classList.remove("hidden");
    
    document.title = ('Time To Go ' + timer);
    
    if (timer) {
        clearInterval(timer);
    }
    
    timer = setInterval(function() {
            if (totalTime <= 0) {
                clearInterval(timer);
                alert("Time's Up!!");
                return;
            }

            const displayHours = Math.floor(totalTime / 3600).toString();
            const displayMinutes = Math.floor((totalTime % 3600) / 60).toString();
            const displaySeconds = (totalTime % 60).toString();

            dispHours.textContent = displayHours.padStart(2, '0');
            dispMinutes.textContent = displayMinutes.padStart(2, '0');
            dispSeconds.textContent = displaySeconds.padStart(2, '0');
            
            totalTime--;
        }, 1000);
}

/* Avoid inline styles when possible and use classes instead */
.hidden { display:none; }

<div class="container">
    <div class="header">Countdown Timer</div>

    <div class="input-section flex" id="input-section">
        <input type="number" id="hours" placeholder="hours" min="0">
        <input type="number" id="minutes" placeholder="minutes" min="0" max="59">
        <input type="number" id="seconds" placeholder="seconds" min="0" max="59">
    </div>
    <button>Start</button>
    <div class="display-section hidden" id="output-section">
        <span id="displayHours">00</span>
        <span id="displayMinutes">00</span>
        <span id="displaySeconds">00</span>
    </div>
</div>