Code Ready | Frontend

✅ Создание таймера с помощью JS



В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.



Ниже оставляем HTML, CSS и JavaScript код для создания крутого таймера. ⤵️

<div id="timer">00:00:00</div>

<button onclick="startStopTimer()">Старт/Стоп</button>

<button button onclick="resetTimer()">Сброс</button>

body { font-family: Arial, sans-serif; text-align: center; margin: 50px; }

#timer { font-size: 2em; margin-bottom: 20px; }

button { font-size: 1em; padding: 10px 20px; cursor: pointer; }

let timer, s = 0, m = 0, h = 0, t = 0;

  function startStopTimer() {

    if (t) {

      clearInterval(timer);

    } else {

      timer = setInterval(() => {

        t ? s++ : clearInterval(timer);

        updateTimer();

      }, 1000);

    } t ^= 1;}

  function resetTimer() {

    clearInterval(timer);

    timer = undefined;

    s = m = h = 0;

    updateTimer();

    t = 0; }

  function updateTimer() {

    const padZero = (value) => (value < 10 ? '0' : '') + value;

    document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`; }

@code_ready | #html #css #js