Pada artikel ini, kita akan mempelajari cara membuat penghitung waktu mundur 30 detik dengan fungsi start, stop, dan reset. Selain itu, kita akan mempelajari cara memicu bunyi alarm saat penghitung waktu berhenti pada hitungan ke-0
Penghitung Waktu Mundur 30 detik dalam JavaScript
Harap aktifkan JavaScript
Penghitung Waktu Mundur 30 detik dalam JavaScriptKami akan membahas solusi untuk membuat penghitung waktu 30 detik dalam 8 langkah bersama dengan kode JavaScript, HTML, dan CSS yang diperlukan di setiap langkah
1. Buat Wadah untuk Pengatur Waktu dalam HTML
First, we need to create a
container in the index.html file to display the current countdown of the timer. In the below code, “countdown” is the parent container and the child container “countdown-number” encloses the timer count value with 30 as the default value.<div id="countdown"> <div id="countdown-number">30</div> </div>2. Menambahkan Tombol untuk Start, Stop dan Reset
Untuk menambahkan fungsionalitas JavaScript ke aplikasi, pertama-tama kita perlu menambahkan elemen HTML yang memungkinkan pengguna memicu kode JS di halaman web. Karenanya untuk mendukung fungsi mulai, berhenti, dan setel ulang, kami menambahkan 3 tombol dengan gambar yang mewakili setiap tindakan
Selanjutnya, kita juga dapat menambahkan kode CSS untuk wadah penghitung, tombol, dan gambar latar belakang. Untuk kode CSS, lihat bagian “Kode Solusi Akhir” di bagian akhir artikel ini
3. Variabel untuk melacak jumlah timer
Setelah kita memiliki kode HTML, sekarang saatnya untuk menambahkan fungsionalitas JS dengan menyematkan main. js ke halaman web. Kami akan membuat variabel JavaScript untuk melacak nilai hitungan saat ini di timer
// variable to store count var remainingTime = 30; // Variable to track whether timer is running or not var isStopped = true;4. Berfungsi untuk Memulai Hitung Mundur di JS
Untuk mengimplementasikan fungsi mulai di penghitung waktu mundur, pertama-tama, kami menetapkan DOM yang dipilih dengan wadah HTML hitung mundur ke sebuah variabel. Selanjutnya, kita akan membuat fungsi JS "startTimer" yang hanya dijalankan jika nilai "isStopped" benar, untuk menghindari beberapa panggilan setInterval() saat timer sudah berjalan
Untuk menampilkan hitungan timer, kita perlu menetapkan properti innerHTML "countContainer" dengan nilai count, yang memastikan HTML dalam dari elemen DOM yang dipilih berisi nilai hitungan timer
Dengan menggunakan setInterval() memastikan fungsi renderTime() dijalankan setiap 1 detik. Fungsi renderTimer() memastikan bahwa variabel “remainingTime” dikurangi dan ditampilkan di layar
Dalam kasus timeout, timer setInterval() dihapus, dan “remainingTime” diatur ulang ke 30
// Select Countdown container const countContainer = document.getElementById("countdown-number"); // function to display time const renderTime = () => { // decement time remainingTime -= 1; // render count on the screen countContainer.innerHTML = remainingTime; // timeout on zero if (remainingTime === 0) { isStopped = true; clearInterval(timer); remainingTime = 30; } }; // Function to start Timer const startTimer = () => { if (isStopped) { isStopped = false; countContainer.innerHTML = remainingTime; timer = setInterval(renderTime, 1000); } };5. Berfungsi untuk Menghentikan Hitung Mundur di JS
Kami mendefinisikan fungsi stopTimer() yang melakukan fungsionalitas jeda untuk pengatur waktu dengan menggunakan clearInterval() pada variabel pengatur waktu yang memiliki id pengatur waktu yang dipicu sebelumnya oleh panggilan setInterval()
// Function to stop Timer const stopTimer = () => { isStopped = true; if (timer) { clearInterval(timer); } };_6. Berfungsi untuk Mengatur Ulang Hitung Mundur di JS
Untuk fungsi reset, selain clearInterval(), kita perlu menetapkan kembali variabel “remainingTime” dengan nilai default 30 dan menampilkannya di layar menggunakan “countContainer. batinHTML”
7. Menetapkan fungsi sebagai event title() untuk tombol
Penghitung waktu mundur tidak berfungsi untuk pengguna meskipun telah menerapkan semua fungsi JavaScript bersama dengan halaman web HTML + CSS
Untuk melakukan operasi penghitung waktu, kami perlu mengizinkan pengguna untuk memicu fungsionalitas dari layar. Kami melakukannya dengan menetapkan elemen Button DOM dengan fungsi JavaScript masing-masing
Dalam kode di bawah ini kami menetapkan tombol start dengan startTimer(), tombol reset dengan resetTimer, dan tombol stop dengan stopTime. Pelajari lebih lanjut tentang acara JavaScript dari javatpoint. com/javascript-events
// Select action buttons const startButton = document.getElementById("start"); const stopButton = document.getElementById("stop"); const resetButton = document.getElementById("reset"); // Attach title event to buttons startButton. title = startTimer; resetButton. title = resetTimer; stopButton. title = stopTimer;_8. Menambahkan suara alarm pada batas waktu
Pada langkah terakhir untuk membuat penghitung waktu mundur meniru penghitung waktu nyata, kami akan menambahkan suara alarm saat waktu habis
First, we need to add a HTML 5 tag to index.html, even though it doesn’t add anything on the screen, it enables javascript to embed an audio file.
<audio id="timeout_audio"></audio>Setelah kita memiliki elemen audio HTML5, kita perlu memuat file audio menggunakan kode JavaScript. Ini dilakukan dengan memilih elemen HTML5 audio menggunakan pemilih JS DOM sebelum menetapkan URL sumber file audio dan memuatnya
Selanjutnya pada fungsi renderTime(), kita memutar file audio menggunakan play() pada elemen audio HTML5 pada timeout. Baca selengkapnya tentang tag Audio HTML5 dari pengembang. mozilla. org/HTML/Elemen/audio