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

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

johnpaul.blick

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

19 | 0

javascript

2 ответа

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

eryn.rodriguez

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

@johnpaul.blick

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

Пример кода:

HTML:

00:00:00

JavaScript:

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";
}

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

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

1 | 0

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

marisa

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

@johnpaul.blick

Есть и другие способы создания счетчика времени на JavaScript, которые могут быть более гибкими в реализации определенной логики или дизайна счетчика. Вот пример функции счетчика времени, где можно устанавливать начальное время, паузу, продолжить счет и сброс времени:

<!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>

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

0 | 0

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

2 ответа

Похожие обсуждения: