javascript-Comment concevoir un programme de compte à rebours en utilisant javascript-Questions et réponses frontales-php.cn

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

王林

Libérer： 2023-05-29 15:46:08

original

939 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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!