Как сделать счётчик времени на javascript?

Пользователь

от johnpaul.blick , в категории: JavaScript , 9 месяцев назад

Как сделать счётчик времени на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от eryn.rodriguez , 9 месяцев назад

@johnpaul.blick 

Есть несколько способов создания счетчика времени на JavaScript. Наиболее распространенный способ - это использование setInterval() функции.


Пример кода:


HTML:

1
00:00:00


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var timer = document.getElementById('timer');
var hour = 0;
var minute = 0;
var second = 0;
var interval;

function startTimer() {
    interval = setInterval(function() {
        second++;
        if (second == 60) {
            minute++;
            second = 0;
        }
        if (minute == 60) {
            hour++;
            minute = 0;
        }
        timer.innerHTML = (hour ? (hour > 9 ? hour : "0" + hour) : "00") + ":" + (minute ? (minute > 9 ? minute : "0" + minute) : "00") + ":" + (second > 9 ? second : "0" + second);
    }, 1000);
}

function pauseTimer() {
    clearInterval(interval);
}

function resetTimer() {
    clearInterval(interval);
    hour = 0;
    minute = 0;
    second = 0;
    timer.innerHTML = "00:00:00";
}


Аналогично нижеследующему скрипту можно поставить на паузу счётчик времени

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var startTime = Date.now();

setInterval(function() {
    var elapsedTime = Date.now() - startTime;
    var seconds = Math.floor(elapsedTime / 1000) % 60;
    var minutes = Math.floor(elapsedTime / 60000) % 60;
    var hours = Math.floor(elapsedTime / 3600000) % 24;
    var displayHours = hours < 10 ? '0' + hours : hours;
    var displayMinutes = minutes < 10 ? '0' + minutes : minutes;
    var displaySeconds = seconds < 10 ? '0' + seconds : seconds;

    document.getElementById('timer').textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds;
}, 1000);