Обновление элемента кнопки в качестве таймера обратного отсчета через JavaScript - PullRequest
Новая
       15

Обновление элемента кнопки в качестве таймера обратного отсчета через JavaScript

0 голосов
/ 10 января 2019

Я хочу создать таймер обратного отсчета, который выглядит как счетчик кадров в секунду для веб-страницы ... по прошествии нескольких часов я не могу понять, что не так ..... помогите

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>

1 Ответ

0 голосов
/ 10 января 2019

Я могу найти три ошибки, которые мешают вашему коду работать правильно.

Несколько таймеров

Прежде всего, поскольку вы вызываете как setInterval во внешней области видимости, так и setTimeout после каждой выполненной итерации, вы в конечном итоге получите много нежелательных экземпляров таймера, которые сделают для вас безумный подсчет.

Я рекомендую вам отказаться от одного из них и придерживаться только одного из них. Для моего примера я придерживаюсь setInterval, так как вы выполняете один и тот же метод снова и снова любым способом.

Инициализация

Так как presentTime объявлен внутри startTimer -функции, он будет постоянно перезаписываться 17 + ":" + 00 (в результате "17:0" btw). Это решается путем объявления его во внешней области видимости.

Запоминание изменений

Наконец, вам нужно сохранить текущее состояние presentTime после внесения изменений. Просто добавление presentTime = [m,s].join(":"); в конце startTimer() решает эту проблему. 

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);
...