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

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

от johnpaul.blick , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от eryn.rodriguez , год назад

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


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

от marisa , 3 месяца назад

@johnpaul.blick 

Есть и другие способы создания счетчика времени на 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
    <title>Таймер</title>
</head>
<body>
    <div id="timer">00:00:00</div>
    <button onclick="startTimer()">Start</button>
    <button onclick="pauseTimer()">Pause</button>
    <button onclick="resumeTimer()">Resume</button>
    <button onclick="resetTimer()">Reset</button>

    <script>
        var timerElement = document.getElementById('timer');
        
        var startTime;
        var elapsedTime = 0;
        var timerInterval;
        var isPaused = false;

        function startTimer() {
            startTime = Date.now() - elapsedTime;
            timerInterval = setInterval(updateTimer, 1000);
            isPaused = false;
        }

        function pauseTimer() {
            clearInterval(timerInterval);
            elapsedTime = Date.now() - startTime;
            isPaused = true;
        }

        function resumeTimer() {
            if (isPaused) {
                startTimer();
            }
        }

        function resetTimer() {
            clearInterval(timerInterval);
            elapsedTime = 0;
            updateTimer();
            isPaused = false;
        }

        function updateTimer() {
            var currentTime = Date.now();
            elapsedTime = currentTime - startTime;
            var hours = Math.floor(elapsedTime / 3600000);
            var minutes = Math.floor((elapsedTime % 3600000) / 60000);
            var seconds = Math.floor((elapsedTime % 60000) / 1000);

            timerElement.textContent = formatTime(hours) + ':' + formatTime(minutes) + ':' + formatTime(seconds);
        }

        function formatTime(time) {
            return time < 10 ? '0' + time : time;
        }
    </script>
</body>
</html>


Этот код позволяет вам запускать, останавливать, продолжать счет и сбрасывать время таймера с помощью соответствующих кнопок.