Comment écrire un programme de réveil en javascript

Avec la popularité des appareils mobiles et des ordinateurs, les réveils ne sont plus un appareil indépendant. De nombreuses personnes utilisent la fonction réveil de leur téléphone portable ou de leur ordinateur pour se rappeler de se lever ou d'accomplir des tâches. Cet article explique comment utiliser JavaScript pour écrire un programme de réveil simple, qui peut s'exécuter dans une page Web et qui est pratique à configurer et à utiliser pour les utilisateurs.

1. Conception

Lors de la conception du programme de réveil, nous devons prendre en compte les aspects suivants :

1. Format et affichage de l'heure : Le réveil doit afficher l'heure actuelle et l'heure de l'alarme réglée, et nous devons définir un format d'heure unifié et affiché sur la page.
2. Interface de fonctionnement : les utilisateurs doivent régler l'heure de l'alarme, démarrer et arrêter la fonction d'alarme sur l'interface, nous devons donc ajouter des boutons de fonctionnement et des zones de texte.
3. Fonction cloche : lorsque l'heure définie arrive, nous devons rappeler aux utilisateurs par le biais du son ou d'autres moyens pour les informer qu'il est temps de se lever ou de terminer la tâche.
4. Implémentation

Ensuite, nous implémentons la conception ci-dessus via le code.

1. Format et affichage de l'heure

Nous pouvons utiliser l'objet Date en JavaScript pour obtenir l'heure actuelle et la convertir en chaîne dans un format spécifique. Voici un exemple de code :

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

En HTML, nous pouvons ajouter une zone de texte pour afficher l'heure actuelle. Par exemple :

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

Nous pouvons définir la valeur de la zone de texte via le code suivant :

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

2. Interface d'opération

Nous pouvons ajouter un formulaire pour que l'utilisateur puisse définir l'heure de l'alarme. Le formulaire contient trois zones de texte pour les heures, les minutes et les secondes. Par exemple :

<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>

En JavaScript, nous pouvons utiliser le code suivant pour obtenir les éléments du formulaire et ajouter des gestionnaires d'événements :

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

Dans la fonction setAlarm, nous devons obtenir l'heure définie dans le formulaire et calculer l'intervalle entre l'heure définie l'heure et l'heure actuelle. Lorsque l'intervalle atteint la valeur définie, nous déclencherons un son ou une autre méthode de rappel.

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

Dans clearAlarm, nous pouvons effacer le réveil précédemment réglé :

function clearAlarm() {
  clearTimeout();
}

3. Fonction Ring

Lorsque setInterval est déclenché, nous pouvons utiliser l'élément audio de HTML5 pour jouer le son. Par exemple :

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

Dans le navigateur, nous devons autoriser la lecture des fichiers audio. Sinon, nous devons utiliser d’autres moyens pour rappeler aux utilisateurs.

3. Test

Nous pouvons ouvrir la page Web dans le navigateur et tester la fonction réveil. Remplissez le formulaire et déclenchez l'alarme. Lorsque l'heure définie est atteinte, nous entendrons un son et verrons une notification d'alarme.

4. Résumé

Dans cet article, nous avons appris à écrire un programme de réveil de base en utilisant JavaScript. Nous utilisons des objets Date pour obtenir et régler l'heure, utilisons des formulaires et des boutons pour définir et déclencher des alarmes, et utilisons des sons et des invites d'avertissement pour rappeler aux utilisateurs. Il s'agit d'un exemple simple que vous pouvez étendre pour implémenter plus de fonctionnalités et l'adapter à vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!