Membuat Stopwatch atau Timer Sederhana dengan JavaScript

Stopwatch adalah alat untuk menghitung waktu dari nol hingga berhenti, sedangkan timer adalah penghitung waktu mundur dari angka tertentu hingga nol. Keduanya sering digunakan dalam aplikasi olahraga, kuis, atau sistem waktu kerja. Untuk itu dalam tutorial kali ini akan dibahas cara Membuat Stopwatch atau Timer Sederhana dengan JavaScript, karena dengan JavaScript, kita bisa membuat stopwatch yang berfungsi penuh hanya dengan beberapa baris kode.

Struktur HTML Dasar Stopwatch

Berikut struktur dasar tampilan stopwatch:

<div class="stopwatch-container">
  <h1 id="display">00:00:00</h1>
  <button id="startBtn">Start</button>
  <button id="stopBtn">Stop</button>
  <button id="resetBtn">Reset</button>
</div>

CSS untuk Tampilan Stopwatch

Tambahkan gaya agar tampil lebih menarik dan rapi:

body {
  font-family: Arial, sans-serif;
  background: #f0f2f5;
  text-align: center;
  padding-top: 100px;
}

.stopwatch-container {
  background: white;
  display: inline-block;
  padding: 30px 50px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
  font-size: 3em;
  margin-bottom: 20px;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #0056b3;
}

JavaScript: Logika Stopwatch

Gunakan kode berikut untuk menjalankan stopwatch:

let [hours, minutes, seconds] = [0, 0, 0];
let display = document.getElementById("display");
let timer = null;

function startTimer() {
  if (timer !== null) return; // Cegah multiple interval
  timer = setInterval(run, 1000);
}

function run() {
  seconds++;
  if (seconds === 60) {
    seconds = 0;
    minutes++;
  }
  if (minutes === 60) {
    minutes = 0;
    hours++;
  }

  display.textContent = 
    `${hours.toString().padStart(2, '0')}:` +
    `${minutes.toString().padStart(2, '0')}:` +
    `${seconds.toString().padStart(2, '0')}`;
}

function stopTimer() {
  clearInterval(timer);
  timer = null;
}

function resetTimer() {
  clearInterval(timer);
  timer = null;
  [hours, minutes, seconds] = [0, 0, 0];
  display.textContent = "00:00:00";
}

document.getElementById("startBtn").addEventListener("click", startTimer);
document.getElementById("stopBtn").addEventListener("click", stopTimer);
document.getElementById("resetBtn").addEventListener("click", resetTimer);

Penjelasan:

• setInterval() digunakan untuk menjalankan fungsi run() setiap 1 detik.

• padStart() menambahkan nol di depan angka agar tampil rapi (misalnya 05 bukan 5).

• Tombol “Start”, “Stop”, dan “Reset” mengontrol jalannya stopwatch.

Variasi: Membuat Timer Mundur

Kamu juga bisa mengubah logika di atas menjadi timer countdown, misalnya 10 detik mundur ke 0.

let timeLeft = 10; // Detik awal
let countdown = document.getElementById("display");
let interval;

function startCountdown() {
  clearInterval(interval);
  interval = setInterval(() => {
    countdown.textContent = `00:00:${timeLeft.toString().padStart(2, '0')}`;
    timeLeft--;

    if (timeLeft < 0) {
      clearInterval(interval);
      countdown.textContent = "Waktu Habis!";
    }
  }, 1000);
}

Studi Kasus: Timer Kuis

Dalam aplikasi kuis, timer bisa digunakan untuk membatasi waktu menjawab soal.
Contohnya:

• Setiap soal memiliki waktu 30 detik.

• Jika waktu habis → otomatis lanjut ke pertanyaan berikutnya atau tampilkan skor.

Dengan JavaScript, kamu bisa mengintegrasikannya dengan event klik tombol “Next Question”.

Kesimpulan

Dengan JavaScript, kamu bisa dengan mudah membuat stopwatch dan timer interaktif tanpa bantuan library tambahan. Fitur ini bisa dikembangkan menjadi:
✅ Timer kuis interaktif.
✅ Stopwatch olahraga.
✅ Pengingat waktu kerja atau belajar (Pomodoro).

Sederhana namun sangat berguna untuk berbagai aplikasi web!