Создаем секундомер на JavaScript

Всем привет 🎉
В этой статье мы узнаем, как мы создать секундомер. Использовать будем нативный HTML, CSS и JavaScript.

Я надеюсь, вам понравится этот простой проект, поэтому давайте начнем с базовой HTML-структуры для секундомера.

 <html>  
 <head>  
   <link rel="stylesheet" href="style.css">  
   <title>  
     Секундомер
   </title>  
 </head>  
 <body>  
   <script src="logic.js"></script>  
   <div class="windowshell">  
     <div class="outershell">  
       <div class="timerscreen" id="timerscreen">  
         <label>Секундомер</label>  
         <!-- Вывод числовых значений секундомера -->  
         <div>   
           <label class="timer" id="timers">0</label>  
           <label class="timer">секунд</label>  
           <label class="timer milli" id="timerms">000</label>  
           <label class="timer milli">миллисекунд</label>  
         </div>  
         
         <!-- Кнопки, которые будут контролировать секундомер -->  
         <div class="buttonholder">  
           <button class="reset c-button" onclick="startTimer()">  
             Start  
           </button>  
           <button class="reset c-button" onclick="stopTimer()">  
             Stop  
           </button>  
           <button class="reset c-button" onclick="resetTimer()">  
             Reset  
           </button>  
         </div>  
       </div>  
     </div>  
   </div> 
 </body>  
 </html>

Так выглядит весь HTML-код для секундомера. Сейчас это выглядит примерно так:

Давайте добавим немного стилей, чтобы он выглядел не на столько ужасно:

* {
  margin: 0;  
}

body {  
   display: flex;
   height: 100vh;
}

.windowshell {  
   background: #f0f0f0;  
   flex-grow: 1;  
   display: flex;  
   align-items: center;  
   justify-content: center;  
}  

.outershell {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
   justify-content: center;  
  
   border-radius: 50%;
   width: 400px;
   height: 400px;
   background: #fafafa;
   box-shadow:  40px 40px 40px #cccccc,
                     0 0 0 #ffffff,
                     0 0 0 #cccccc inset,
                     2px 2px 2px #ffffff inset;
}

.c-button {
  min-width: 100px;
  font-family: inherit;
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676d7;
  color: #fff;
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
}

.c-button:hover {
  background: #1d49aa;
}

.c-button:active {
  background: #4676d7;
}

.c-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
} 

.milli {  
   font-size: large;  
} 

.timerscreen {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
}  

.timer {  
 padding: 10px;  
} 
  
label {  
   font-variant: small-caps;  
   font-family: fantasy;  
   font-size: xx-large;  
}

Ну и немного оживим наш секундомер при помощи JS:

let intervalVariable = undefined;  
let timeleft = 0;  
let totaltime = 0;  

const startTimer = () => {  
   // Создаем интервал, который будет считать нам время
   intervalVariable = setInterval(updateTime, 10);  
}  

 const resetTimer = () => {  
   // Останавливаем таймер
   stopTimer();
   timeleft = -10;
   
   // Обновляем значение в ui
   updateTime();  
}  

const stopTimer = () => {
   // Производим очистку интервала
   clearInterval(intervalVariable);  
} 

const updateTime = () => {
   // Шаг 10 миллисекунд
   timeleft = timeleft + 10;  
 
   // Получаем нужные нам элементы
   const timers = document.getElementById("timers");  
   const timerms = document.getElementById("timerms"); 
   const milli = timeleft % 1000;  
 
   // Устанавливаем значения
   timers.innerHTML = Math.floor(timeleft / 1000);  
   timerms.innerHTML = Math.floor(milli / 10);  
   timers.style.color = "green";  
   timerms.style.color = "red";  
}

И в итоге получаем что-то такое:

Ловите песочницу:

На этом сегодняшний мини проект ванильного кода окончен, я понимаю что информативности тут для профи нет никакой, но вот новичкам - явно будет полезно написать что-то до ужаса простое и понятное!

До новых встреч!

Читайте дальше:

#javascript #css #html #заметка_на_коленке