Atur timer selama 10 menit javascript

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

Nội dung chính Show

• 1. Create a container for every Digit
• 2. Tambahkan tombol untuk memulai, menghentikan, dan mengatur ulang tindakan
• 3. Berfungsi untuk Menghasilkan string hitung mundur
• 4. Berfungsi untuk Memperbarui dan Menampilkan hitungan mundur
• 5. Mulai fungsi pengatur waktu
• 6. Hentikan fungsi pengatur waktu
• 7. Setel ulang fungsi pengatur waktu
• 8. Picu suara Alarm saat waktu habis
• Bagaimana cara mengatur penghitung waktu mundur di JavaScript?
• Bagaimana cara mengatur timer selama 30 menit di JavaScript?
• Bagaimana cara membuat penghitung waktu dalam JavaScript?
• Bagaimana Anda membuat pengatur waktu 10 detik dalam 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

// 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);
  });
};

5. 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.onclick = 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.onclick = 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.onclick = 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

Bagaimana cara mengatur penghitung waktu mundur di JavaScript?

Bagaimana cara mengatur timer selama 30 menit di JavaScript?

Bagaimana cara membuat penghitung waktu dalam JavaScript?

Bagaimana Anda membuat pengatur waktu 10 detik dalam JavaScript?