recherche

Maison  >  Article  >  interface Web  >  javascript-Comment concevoir un programme de compte à rebours en utilisant javascript

javascript-Comment concevoir un programme de compte à rebours en utilisant javascript

王林
王林original
2023-05-29 15:46:08848parcourir

Avec l'agitation de nos vies modernes, les gens ont souvent besoin d'un outil de chronométrage précis. Le programme de compte à rebours est un outil tellement pratique qu'il peut nous aider à compter à rebours avec précision afin que nous puissions mieux organiser notre temps. Dans cet article, je vais vous montrer comment concevoir un programme de compte à rebours en utilisant JavaScript.

Préparation

Tout d'abord, nous devons créer un fichier HTML de base et y ajouter une zone de compte à rebours et un bouton. La zone du compte à rebours sera utilisée pour afficher le temps du compte à rebours, et le bouton sera utilisé pour démarrer le compte à rebours. Voici le code HTML : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时程序</title>
  </head>
  <body>
    <div id="countdown"></div>
    <button onclick="startCountdown()">开始倒计时</button>
  </body>
</html>

Dans le code ci-dessus, nous avons utilisé un élément div pour afficher le compte à rebours et ajouté un bouton pour démarrer le compte à rebours. Lorsque vous cliquez sur le bouton, une fonction JavaScript startCountdown() est appelée.

Écrire du code JavaScript

Maintenant, nous devons écrire du code JavaScript pour concevoir le programme de compte à rebours. Le programme utilisera l'objet Date pour calculer l'heure et l'affichera dans la zone du compte à rebours. Ci-dessous le code JavaScript : 

function startCountdown() {
  // 设置倒计时时间（秒数）
  var countdownTime = 60;

  // 获取当前时间
  var now = new Date().getTime();

  // 计算倒计时结束时间
  var countdownEnd = now + (countdownTime * 1000);

  // 更新倒计时区域
  var countdownElement = document.getElementById('countdown');
  var countdownInterval = setInterval(function() {
    // 获取当前时间
    var now = new Date().getTime();

    // 计算剩余时间
    var countdownRemaining = countdownEnd - now;

    // 将剩余时间转换成分、秒格式
    var minutes = Math.floor((countdownRemaining % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((countdownRemaining % (1000 * 60)) / 1000);

    // 更新倒计时区域
    countdownElement.innerHTML = minutes + " 分钟 " + seconds + " 秒 ";

    // 当倒计时结束，清除计时器
    if (countdownRemaining <= 0) {
      clearInterval(countdownInterval);
      countdownElement.innerHTML = "倒计时结束！";
    }
  }, 1000);
}

Dans le code ci-dessus, nous avons appelé la fonction startCountdown() depuis le bouton. Cette fonction règle d'abord le temps du compte à rebours (60 secondes) et obtient l'heure actuelle. Ensuite, il calcule le temps jusqu'à la fin du compte à rebours et l'enregistre dans la variable countdownEnd.

Ensuite, la fonction utilise la fonction setInterval() pour mettre à jour périodiquement la zone de compte à rebours. Dans chaque intervalle, il obtient l'heure actuelle et calcule le temps restant. Il convertit ensuite le temps restant en minutes et secondes formatées et le met à jour dans la zone du compte à rebours. Enfin, lorsque le compte à rebours se termine, il efface le minuteur et règle la zone du compte à rebours sur « Compte à rebours terminé ! ».

Test du programme

Maintenant, nous avons terminé la conception du programme de compte à rebours. Ouvrons le fichier HTML et testons si le programme fonctionne correctement. Lorsque nous cliquons sur le bouton « Démarrer le compte à rebours », le programme de compte à rebours commencera à fonctionner et affichera le message « Compte à rebours terminé ! » après 60 secondes. Si vous souhaitez modifier le temps du compte à rebours, mettez à jour la valeur de la variable countdownTime dans la fonction startCountdown.

Conclusion

En utilisant JavaScript, nous pouvons facilement concevoir un programme de compte à rebours pour nous aider à mieux gérer le temps. Le programme de compte à rebours peut être utilisé dans diverses situations, telles que les examens, la forme physique, le repos, etc. J'espère que cet article pourra vous aider à apprendre à utiliser JavaScript pour concevoir un programme de compte à rebours et l'appliquer à la vie réelle.

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!

JavaScript html date 对象
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment lier CSS à HTMLArticle suivant：Comment lier CSS à HTML

Articles Liés

Voir plus