通过 javascript 将按钮元素更新为倒数计时器

Question

我想创建一个倒数计时器，它看起来像网页的 fps 计数器... 经过几个小时的时间，我无法找出问题所在.....帮助

<script>
    var myvar = setInterval(function () { startTimer() }, 1000);

    function startTimer() {
        var presentTime = 17 + ":" + 00;
        var timeArray = presentTime.split(/[:]+/);
        var m = timeArray[0];
        var s = checkSecond((timeArray[1] - 1));
        if (s == 59) {
            m = m - 1
        }
        //if(m<0){alert('timer completed')}

        var button2 = document.createElement("Button2");
        var interval = m + s;
        button2.innerHTML = Math.round(interval);

        button2.style = "top:0; left:0rem; height:10% ;color: black; background-color: #ffffff;position:fixed;padding:20px;font-size:large;font-weight: bold;";

        setTimeout(startTimer, 1000);
        document.body.appendChild(button2);
    }

    function checkSecond(sec) {
        if (sec < 10 && sec >= 0) {
            sec = "0" + sec
        }; // add zero in front of numbers < 10
        if (sec < 0) {
            sec = "59"
        };
        return sec;
    }
</script>

Answer 1

我可以找到三个阻碍您的代码正确执行的错误。

多个定时器

首先，因为您在外部范围内调用了一个 setInterval，然后在每次执行迭代后调用了一个 setTimeout，您最终会得到许多不需要的计时器实例，这些实例会为你.

我建议您放弃其中任何一个并坚持使用其中一个。对于我的示例，我碰巧坚持使用 setInterval，因为您正在以任何方式一遍又一遍地执行完全相同的方法。

初始化

由于 presentTime 是在 startTimer 函数中声明的，它将不断地被 17 + ":" + 00 覆盖（顺便说一句，结果是 "17:0"）。这可以通过在外部范围内声明来解决。

记住变化

最后需要保存presentTime修改后的当前状态。只需在 startTimer() 末尾添加一个 presentTime = [m,s].join(":"); 即可解决此问题。

var presentTime = "17:00";

function startTimer() {
    var timeArray = presentTime.split(/[:]+/);
    var m = timeArray[0];
    var s = checkSecond((timeArray[1] - 1));
    if (s == 59) {
        m = m - 1
    }

    var button2 = document.createElement("Button2");
    var interval = s;
    button2.innerHTML = m + ":" + s;

    button2.style = "top:0; left:0rem; height:10% ;color: black; background-color: #ffffff;position:fixed;padding:20px;font-size:large;font-weight: bold;";

    document.body.appendChild(button2);
    presentTime = [m,s].join(":");
}

function checkSecond(sec) {
    if (sec < 10 && sec >= 0) {
        sec = "0" + sec
    }; // add zero in front of numbers < 10
    if (sec < 0) {
        sec = "59"
    };
    return sec;
}

var interval = setInterval(startTimer, 1000);

通过 javascript 将按钮元素更新为倒数计时器

Updating the button element as a countdown timer through javascript

javascript

element

timer

setinterval

countdowntimer