Как создать секундомер с помощью HTML CSS и JavaScript?

Опубликовано: 30 Декабря, 2022

В этой статье мы увидим , как создать секундомер. Мы можем создать секундомер в ReactJS, используя HTML CSS и JavaScript. Наш секундомер будет иметь функциональность Start, Stop, Reset .

Предпосылки:

Необходимы базовые знания HTML, CSS и JavaScript.

Подход:

Создайте один контейнер, в котором присутствуют все элементы.
Внутри этого контейнера добавьте 2 элемента div, один из которых содержит все элементы времени, такие как часы, минуты, секунды и миллисекунды . а другой div содержит 3 кнопки для запуска, остановки и сброса .
Теперь стиль, который вы хотите, я добавляю этот контейнер в центре.
Теперь добавьте файл JavaScript, в котором добавьте функции нажатия на все три кнопки и создайте еще одну функцию, в которой напишите весь логический код и добавьте значение в соответствующие часы, минуты, секунды, миллисекунды и т. д.

Пример. В этом примере показано, как создать секундомер с помощью HTML CSS и JavaScript.

index.html: напишите код HTML в файле index.html, как показано ниже:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Stopwatch</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div class="container">
        <h1>Geeks For Geeks <br>
            Stop Watch</h1>
        <div id="time">
            <span class="digit" id="hr">
              00</span>
            <span class="txt">Hr</span>
            <span class="digit" id="min">
              00</span>
            <span class="txt">Min</span>
            <span class="digit" id="sec">
              00</span>
            <span class="txt">Sec</span>
            <span class="digit" id="count">
              00</span>
        </div>
        <div id="buttons">
            <button class="btn" id="start">
              Start</button>
            <button class="btn" id="stop">
              Stop</button>
            <button class="btn" id="reset">
              Reset</button>
        </div>
    </div>
  
    <script src="script.js"></script>
</body>
  
</html>

style.css: напишите код CSS в файле style.css, как показано ниже:

CSS

body {
    padding: 0;
    margin: 0;
    font-family: verdana;
}
  
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 61, 0);
}
  
h1 {
    color: rgb(10, 238, 10);
    text-align: center;
}
  
.digit {
    font-size: 150px;
    color: #fff;
}
  
.txt {
    font-size: 30px;
    color: #fffcd6;
}
  
#buttons {
    margin-top: 50px;
}
  
.btn {
    width: 100px;
    padding: 10px 15px;
    margin: 0px 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    transition: 0.5s;
    color: white;
    font-weight: 500;
}
  
#start {
    background-color: #009779;
}
  
#stop {
    background-color: #0e85fc;
}
  
#reset {
    background-color: #c91400;
}

script.js: напишите код javascript в файле script.js, как показано ниже:

Javascript

let startBtn = document.getElementById("start");
let stopBtn = document.getElementById("stop");
let resetBtn = document.getElementById("reset");
  
let hour = 00;
let minute = 00;
let second = 00;
let count = 00;
  
startBtn.addEventListener("click", function () {
    timer = true;
    stopWatch();
});
  
stopBtn.addEventListener("click", function () {
    timer = false;
});
  
resetBtn.addEventListener("click", function () {
    timer = false;
    hour = 0;
    minute = 0;
    second = 0;
    count = 0;
    document.getElementById("hr").innerHTML = "00";
    document.getElementById("min").innerHTML = "00";
    document.getElementById("sec").innerHTML = "00";
    document.getElementById("count").innerHTML = "00";
});
  
function stopWatch() {
    if (timer) {
        count++;
  
        if (count == 100) {
            second++;
            count = 0;
        }
  
        if (second == 60) {
            minute++;
            second = 0;
        }
  
        if (minute == 60) {
            hour++;
            minute = 0;
            second = 0;
        }
  
        let hrString = hour;
        let minString = minute;
        let secString = second;
        let countString = count;
  
        if (hour < 10) {
            hrString = "0" + hrString;
        }
  
        if (minute < 10) {
            minString = "0" + minString;
        }
  
        if (second < 10) {
            secString = "0" + secString;
        }
  
        if (count < 10) {
            countString = "0" + countString;
        }
  
        document.getElementById("hr").innerHTML = hrString;
        document.getElementById("min").innerHTML = minString;
        document.getElementById("sec").innerHTML = secString;
        document.getElementById("count").innerHTML = countString;
        setTimeout(stopWatch, 10);
    }
}

Выход:

Ссылка на GitHub: https://github.com/priyansh70/Stopwatch

JavaScript HTML CSS

Как создать секундомер с помощью HTML CSS и JavaScript?

HTML

CSS

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ