Pada artikel ini, kita akan belajar cara membuat penghitung waktu mundur 30 menit di mana Anda dapat memulai hitungan mundur, menghentikan hitungan mundur, dan juga mengatur ulang hitungan mundur ke nilai default. Selain itu, kami akan menambahkan suara alarm saat hitungan mundur mencapai 0 setelah berhasil menyelesaikan 30 menit
Atur timer selama 10 menit javascript
3. Berfungsi untuk Menghasilkan string hitung mundur
Sebelum kami menambahkan fungsi JavaScript apa pun ke aplikasi, kami perlu membuat fungsi JavaScript untuk mendukung fungsi penghitung waktu mundur. Membuat fungsi terpisah memungkinkan penggunaan kembali kode dan membuatnya lebih mudah untuk memodifikasi/menambahkan fungsi yang ada
Pertama, kita akan membuat fungsi untuk menghasilkan string hitung mundur yang membutuhkan sisa waktu dalam hitungan detik. Menampilkan hitung mundur secara langsung dalam hitungan detik kurang dapat dibaca, karenanya akan menghasilkan string hitung mundur dalam “MM. SS” dan tambahkan nol untuk nilai satu digit
// Default inital value of timer
const defaultValue = 30 * 60;
// variable to the time
var countDownTime = defaultValue;
// Function calculate time string
const findTimeString = [] => {
var minutes = String[Math.trunc[countDownTime / 60]];
var seconds = String[countDownTime % 60];
if [minutes.length === 1] {
minutes = "0" + minutes;
}
if [seconds.length === 1] {
seconds = "0" + seconds;
}
return minutes + seconds;
};
4. Berfungsi untuk Memperbarui dan Menampilkan hitungan mundur
Setelah kami dapat menghasilkan string
“MM:SS” format, now we have to display the string on the screen. We select every containers created in step 1 using “querySelectorAll” method and iterate over the list and assigning the DOM innerHTML with the characters of the countdown string.// Select Every Count Container
const countContainer = document.querySelectorAll[".count-digit"];
// Function to display coundown on screen
const renderTime = [] => {
const time = findTimeString[];
countContainer.forEach[[count, index] => {
count.innerHTML = time.charAt[index];
}];
};
Penghitung Waktu Mundur 30 detik dalam JavaScript
Harap aktifkan JavaScript
Penghitung Waktu Mundur 30 detik dalam JavaScript5. Mulai fungsi pengatur waktu
Di awal hitungan mundur pengatur waktu, kami menginisialisasi fungsi runCountDown untuk dijalankan setelah setiap detik. Dalam metode runCountDown, kami mengurangi waktu hitung mundur dan menampilkannya di layar. Selain itu, saat waktu habis, hitungan mundur dihentikan dengan menggunakan clearInterval[], dan countDownTime disetel ke nilai default
const startAction = document.getElementById["start-timer"];
// Function to start Countdown
const startTimer = [] => {
if [isStopped] {
isStopped = false;
timerID = setInterval[runCountDown, 500];
}
};
startAction. title = startTimer;
// function to execute timer
const runCountDown = [] => {
// decrement time
countDownTime -= 1;
//Display updated time
renderTime[];
// timeout on zero
if [countDownTime === 0] {
stopTimer[];
countDownTime = defaultValue;
}
};
_6. Hentikan fungsi pengatur waktu
Untuk menghentikan pengatur waktu, kita hanya perlu melakukan clearInterval[] dengan timeID yang diambil sebelumnya dari setInterval[] dalam fungsi pengatur waktu mulai
const stopAction = document.getElementById["stop-timer"];
// Function to stop Countdown
const stopTimer = [] => {
isStopped = true;
if [timerID] {
clearInterval[timerID];
}
};
stopAction. title = stopTimer;
7. Setel ulang fungsi pengatur waktu
Untuk mengatur ulang timer, selain menghentikan timer, kita perlu mengatur ulang nilai countdowntime dan menampilkan nilai yang diperbarui di layar.
const resetAction = document.getElementById["reset-timer"];
// Function to reset Countdown
const resetTimer = [] => {
stopTimer[];
countDownTime = defaultValue;
renderTime[];
};
resetAction. title = resetTimer;
_8. Picu suara Alarm saat waktu habis
Langkah terakhir adalah memasukkan tag audio HTML5 dan menginisialisasi file audio dengan URL. Kemudian kami akan memicu file audio tersebut menggunakan play[] pada waktu habis