Код для секундоміра (годинника)…

Вихід виглядає так...

Ці коди працюють разом, щоб створити повністю функціональний секундомір.

HTML

HTML-структура налаштовує ігрову дошку та простий інтерфейс для користувача.

Секундомір
00:00:00
Пуск    Зупинка    Скидання    

Css

CSS додає стилізацію, включаючи градієнтний фон, ефекти при наведенні та анімації, щоб зробити гру візуально привабливою.
Дизайн чистий, з плавними переходами та сучасним виглядом.

/* Загальні стилі */  
body {  
 margin: 0;  
 font-family: 'Poppins', sans-serif;  
 display: flex;  
 justify-content: center;  
 align-items: center;  
 height: 100vh;  
 background: linear-gradient(120deg, #f3e7ff, #d3efff, #cfffd3);  
 background-size: 400% 400%;  
 animation: gradientBackground 8s ease infinite;  
}  

/* Анімація градієнту */  
@keyframes gradientBackground {  
 0% { background-position: 0% 50%; }  
 50% { background-position: 100% 50%; }  
 100% { background-position: 0% 50%; }  
}  

.stopwatch-container {  
 text-align: center;  
 background: rgba(255, 255, 255, 0.2);  
 border-radius: 50%;  
 width: 320px;  
 height: 320px;  
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);  
 backdrop-filter: blur(20px);  
 -webkit-backdrop-filter: blur(20px);  
 border: 1px solid rgba(255, 255, 255, 0.3);  
 display: flex;  
 flex-direction: column;  
 justify-content: center;  
 align-items: center;  
 padding: 20px;  
}  

.title {  
 font-size: 1.8rem;  
 font-weight: 600;  
 color: #5a5a5a;  
 margin-bottom: 15px;  
 text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);  
}  

.stopwatch {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 gap: 20px;  
}  

.time {  
 font-size: 2.5rem;  
 font-weight: bold;  
 color: #555;  
 background: linear-gradient(145deg, #ffffff, #f3e7ff);  
 border-radius: 50%;  
 width: 170px;  
 height: 170px;  
 display: flex;  
 justify-content: center;  
 align-items: center;  
 box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15);  
 border: 4px solid rgba(255, 255, 255, 0.4);  
}  

.buttons {  
 display: flex;  
 gap: 15px;  
 flex-wrap: wrap;  
 justify-content: center;  
}  

/* Стилізація кнопок */  
.btn {  
 font-size: 1rem;  
 padding: 12px 18px;  
 border: none;  
 border-radius: 30px;  
 cursor: pointer;  
 color: #fff;  
 background: linear-gradient(145deg, #ffc1e3, #ff8eb2);  
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  
 transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;  
}  

.btn:hover {  
 transform: translateY(-5px);  
 background: linear-gradient(145deg, #ff8eb2, #ffc1e3);  
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);  
}  

.btn:active {  
 transform: translateY(0);  
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);  
}  

/* Спеціальні стилі для кнопок */  
#start {  
 background: linear-gradient(145deg, #a4edc8, #74d7aa);  
}  

#start:hover {  
 background: linear-gradient(145deg, #74d7aa, #a4edc8);  
}  

#stop {  
 background: linear-gradient(145deg, #ffcbcb, #ff8686);  
}  

#stop:hover {  
 background: linear-gradient(145deg, #ff8686, #ffcbcb);  
}  

#reset {  
 background: linear-gradient(145deg, #cabdff, #a799ff);  
}  

#reset:hover {  
 background: linear-gradient(145deg, #a799ff, #cabdff);  
}

Javascript

JavaScript обробляє логіку гри та робить комп'ютер складним суперником, використовуючи алгоритм мінімакс.

let startTime;  
let elapsedTime = 0;  
let timerInterval;  

const timeDisplay = document.getElementById('time');  
const startButton = document.getElementById('start');  
const stopButton = document.getElementById('stop');  
const resetButton = document.getElementById('reset');  

function formatTime(ms) {  
 const totalSeconds = Math.floor(ms / 1000);  
 const minutes = Math.floor(totalSeconds / 60);  
 const seconds = totalSeconds % 60;  
 const milliseconds = Math.floor((ms % 1000) / 10);  

 return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;  
}  

function startTimer() {  
 startTime = Date.now() - elapsedTime;  
 timerInterval = setInterval(() => {  
 elapsedTime = Date.now() - startTime;  
 timeDisplay.textContent = formatTime(elapsedTime);  
 }, 10);  
 startButton.disabled = true;  
 startButton.style.opacity = "0.7";  
}  

function stopTimer() {  
 clearInterval(timerInterval);  

startButton.disabled = false;  
 startButton.style.opacity = "1";  
}  

function resetTimer() {  
 clearInterval(timerInterval);  
 elapsedTime = 0;  
 timeDisplay.textContent = "00:00:00";  
 startButton.disabled = false;  
 startButton.style.opacity = "1";  
}  

startButton.addEventListener('click', startTimer);  
stopButton.addEventListener('click', stopTimer);  
resetButton.addEventListener('click', resetTimer);

Коротко кажучи, HTML будує калькулятор, CSS робить його привабливим, а JavaScript робить його функціональним!

Збережіть файли як index.html, styles.css і script.js, і протестуйте в браузері.

Гра адаптивна і підтримує як настільні, так і мобільні пристрої, що забезпечує плавний і приємний досвід.

— код з gp…

Перекладено з: Code for stop clock (watch)…