Stopwatch yang Berfungsi

Pelajaran 9 dari 10 dalam kursus Stopwatch: Proyek HTML/CSS/JS di Coddy.

Sekarang, setelah tombol mulai dan berhenti berfungsi, saatnya mulai menghitung!

Untuk menghitung, kita akan menggunakan fungsi JavaScript bernama setInterval:

const interval = setInterval(func, milliseconds)

Fungsi ini menerima dua argumen: sebuah fungsi dan angka yang menyatakan milidetik. Fungsi tersebut dipanggil setiap sejumlah milidetik yang ditentukan.

Contohnya:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

Pada contoh di atas, kita menambah nilai variabel count sebanyak 1 setiap detik.

Jika kamu ingin menghentikan interval, gunakan clearInterval dengan nilai yang dikembalikan oleh setInterval:

const interval = setInterval(updateCount, 1000)
clearInterval(interval)

Tantangan

Sedang

Tambahkan dukungan berikut ke file JS-mu:

Setelah tombol mulai/berhenti diklik, atur interval yang akan memperbarui teks stopwatch setiap detik sebanyak satu, pastikan formatnya benar.
Setelah tombol mulai/berhenti diklik lagi, hentikan interval yang sedang berjalan.

Setelah kamu menambahkan setInterval ke kodemu, kamu perlu mengeklik tombol reset di tampilan web:

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Stopwatch: Proyek HTML/CSS/JS

1Pengenalan

Gambaran Umum

4Bagian JS

Memulai dan Menghentikan

Stopwatch yang Berfungsi Pelajaran proyek

2Bagian HTML

3Bagian CSS

Latihan sendiri: Playground Web