Question

试图制作一个小时和分钟的倒数计时器，但在我的 JS 中遇到了麻烦。我使用 setInterval 来改变时间，但我认为问题出在变量范围内，但我找不到错误。我的html：

<div class="content">
            <div id="form-div">
                <form>
                    <label>
                        Hours: 
                        <input id="hoursVal" name="hoursVal" type="number" min=0 max=99 value="0">
                    </label>
                    <label>
                        Minutes: 
                        <input id="minutesVal" name="minutesVal" type="number" min=1 max=59 value="5">
                    </label>
                    <button type="button" onclick="startTimer()">Старт</button>
                </form>
            </div>
            <div id="counter" style="display:none">
                <div id="timer">
                    <div id="negative">-</div>
                    <div id="hours"></div>:<div id="minutes"></div>
                </div>
                <button type="button" onclick="stopTimer()">Stop</button>
            </div>
        </div>

我的js：

function startTimer() {
    formDiv.style.display = 'none';
    counter.style.display = 'block';

    var rawHours = document.getElementById('hoursVal').value;
    var minutes = document.getElementById('minutesVal').value;

    if (rawHours > 0) {
        var hours = hours * 60;
    }

    hours = parseInt(hours, 10);
    minutes = parseInt(minutes, 10);

    var minutesSum = hours + minutes;
    
    var hoursDiv = document.getElementById('hours');
    var minutesDiv = document.getElementById('minutes');

    if (rawHours < 10) {
        hoursDiv.innerHTML = "0" + rawHours;
    }
    else if (rawHours == 0) {
        hoursDiv.innerHTML = "00";
    }
    else {
        hoursDiv.innerHTML = rawHours;
    }

    if (minutes < 10) {
        minutesDiv.innerHTML = "0" + minutes;
    }
    else if (minutes == 0) {
        minutesDiv.innerHTML = "00";
    }
    else {
        minutesDiv.innerHTML = minutes;
    }

    var countdown = setInterval(timer, 60000);

    function timer() {
        --minutesSum;
        console.log(minutesSum);

        var hours = Math.floor(minutesSum/60);
        var minutes = minutesSum % 60;

        if (hours < 10) {
            hoursDiv.innerHTML = "0" + hours;
        }
        else if (hours == 0) {
            hoursDiv.innerHTML = "00";
        }
        else {
            hoursDiv.innerHTML = hours;
        }

        if (minutes < 10) {
            minutesDiv.innerHTML = "0" + minutes;
        }
        else if (minutes == 0) {
            minutesDiv.innerHTML = "00";
        }
        else {
            minutesDiv.innerHTML = minutes;
        }
    }
}

而且也有麻烦。我的第一个数字输入具有整数类型，因此当我尝试从输入获取值到我的 js 时，我得到整数。但是我的第二个输入给了我一个字符串，即使它是一个数字类型。所以我需要 parseInt 以避免类型错误。它是可修复的还是我的解决方案就足够了？以及如何禁用在我的数字输入中输入点？

使用 setInterval 的小时和分钟倒数计时器

0 个答案: