Bagaimana Anda membuat pengatur waktu 10 detik dalam javascript?

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

Kami 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

<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

<button id="stop">
   <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
</button>
<button id="start">
   <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
</button>
<button id="reset">
   <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
</button>

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”

// Function to reset Timer
const resetTimer = () => {
  isStopped = true;
  clearInterval(timer);
  remainingTime = 30;
  countContainer.innerHTML = remainingTime;
};

7. Menetapkan fungsi sebagai event onclick() 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 onclick event to buttons
startButton.onclick = startTimer;
resetButton.onclick = resetTimer;
stopButton.onclick = 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

Bagaimana cara mengatur timer di JavaScript?

Apakah ada pengatur waktu di JavaScript?

Bagaimana cara mengatur timer selama 30 menit di JavaScript?

Bagaimana Anda mengatur timer untuk suatu fungsi?