Bagaimana untuk menulis program jam penggera dalam javascript

Dengan populariti peranti mudah alih dan komputer, jam penggera bukan lagi peranti bebas, ramai orang menggunakan fungsi jam penggera telefon bimbit atau komputer mereka untuk mengingatkan diri mereka untuk bangun atau menyelesaikan tugas. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menulis program jam penggera yang ringkas, yang boleh dijalankan dalam halaman web dan mudah untuk disediakan dan digunakan oleh pengguna.

1. Reka Bentuk

Apabila mereka bentuk program jam penggera, kita perlu mengambil kira aspek berikut:

1. Format masa dan paparan: Penggera jam perlu dipaparkan Untuk masa semasa dan masa penggera yang ditetapkan, kita perlu menetapkan format masa bersatu dan memaparkannya pada halaman.
2. Antara muka operasi: Pengguna perlu menetapkan masa penggera, memulakan dan menghentikan fungsi penggera pada antara muka, jadi kami perlu menambah beberapa butang operasi dan kotak teks.
3. Fungsi dering: Apabila masa yang ditetapkan tiba, kami perlu mengingatkan pengguna melalui bunyi atau cara lain untuk memberitahu mereka bahawa sudah tiba masanya untuk bangun atau menyelesaikan tugas.
4. Pelaksanaan

Seterusnya, kami melaksanakan reka bentuk di atas melalui kod.

1. Format masa dan paparan

Kita boleh menggunakan objek Date dalam JavaScript untuk mendapatkan masa semasa dan menukarnya kepada rentetan dalam format tertentu. Berikut ialah contoh kod:

function getTimeString(date) {
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  hours = hours < 10 ? &#39;0&#39; + hours : hours;
  minutes = minutes < 10 ? &#39;0&#39; + minutes : minutes;
  seconds = seconds < 10 ? &#39;0&#39; + seconds : seconds;
  return hours + &#39;:&#39; + minutes + &#39;:&#39; + seconds;
}

Dalam HTML, kita boleh menambah kotak teks untuk memaparkan masa semasa. Contohnya:

<input type="text" id="timeDisplay" readonly>

Kami boleh menetapkan nilai kotak teks melalui kod berikut:

let timeDisplay = document.getElementById('timeDisplay');
timeDisplay.value = getTimeString(new Date());

2. Antara muka operasi

Kami boleh menambah borang , supaya pengguna boleh menetapkan masa penggera. Borang ini mengandungi tiga kotak teks untuk jam, minit dan saat. Contohnya:

<form id="alarmForm">
  <label>小时</label>
  <input type="text" id="hours">
  <label>分钟</label>
  <input type="text" id="minutes">
  <label>秒钟</label>
  <input type="text" id="seconds">
  <button type="button" id="setAlarm">设置闹钟</button>
  <button type="button" id="clearAlarm">关闭闹钟</button>
</form>

Dalam JavaScript, kita boleh menggunakan kod berikut untuk mendapatkan elemen borang dan menambah pengendali acara:

let alarmForm = document.getElementById('alarmForm');
let setAlarmButton = document.getElementById('setAlarm');
let clearAlarmButton = document.getElementById('clearAlarm');
setAlarmButton.addEventListener('click', setAlarm);
clearAlarmButton.addEventListener('click', clearAlarm);

Dalam fungsi setAlarm, kita perlu mendapatkan nilai yang ditetapkan dalam masa bentuk, dan hitung selang antara masa yang ditetapkan dan masa semasa. Apabila selang masa mencapai nilai yang ditetapkan, kami akan mencetuskan bunyi atau kaedah peringatan lain.

function setAlarm() {
  let hours = document.getElementById('hours').value;
  let minutes = document.getElementById('minutes').value;
  let seconds = document.getElementById('seconds').value;
  let alarmTime = new Date();
  alarmTime.setHours(hours);
  alarmTime.setMinutes(minutes);
  alarmTime.setSeconds(seconds);
  let timeDiff = alarmTime.getTime() - new Date().getTime();
  if (timeDiff < 0) {
    alert(&#39;请选择正确的时间&#39;);
    return;
  }
  setTimeout(() => {
    // 响铃功能
    alert('时间到了！');
  }, timeDiff);
}

Dalam clearAlarm, kami boleh mengosongkan penggera yang ditetapkan sebelum ini:

function clearAlarm() {
  clearTimeout();
}

3. Fungsi dering

Apabila setInterval dicetuskan, Kita boleh gunakan elemen audio HTML5 untuk memainkan bunyi. Contohnya:

let audioElement = new Audio('sound.mp3');
audioElement.play();

Dalam penyemak imbas, kita perlu membenarkan fail audio dimainkan. Jika tidak, kita perlu menggunakan cara lain untuk mengingatkan pengguna.

3. Ujian

Kami boleh membuka halaman web dalam penyemak imbas dan menguji fungsi penggera. Isi borang dan mulakan penggera. Apabila masa yang ditetapkan tercapai, kami akan mendengar bunyi dan melihat pemberitahuan penggera.

4. Ringkasan

Dalam artikel ini, kami mempelajari cara menulis program jam penggera asas menggunakan JavaScript. Kami menggunakan objek Tarikh untuk mendapatkan dan menetapkan masa, menggunakan borang dan butang untuk menetapkan dan memulakan penggera, dan menggunakan bunyi dan gesaan amaran untuk mengingatkan pengguna. Ini adalah contoh mudah yang boleh anda lanjutkan untuk melaksanakan lebih banyak fungsi dan menyesuaikan diri dengan keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk menulis program jam penggera dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!