Comment créer un effet de compte à rebours réactif en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer un effet de compte à rebours réactif

Vue d'ensemble :
L'effet de compte à rebours est l'une des fonctions courantes dans le développement Web, particulièrement adapté à la promotion d'événements, de produits et d'autres scénarios. Cet article vous apprendra à utiliser HTML, CSS et jQuery pour créer un effet de compte à rebours réactif et fournira des exemples de code spécifiques.

Étapes de mise en œuvre :

1. Créer une structure HTML :

   <div id="countdown">
     <div class="timer">
    <span id="days"></span>
    <span>:</span>
    <span id="hours"></span>
    <span>:</span>
    <span id="minutes"></span>
    <span>:</span>
    <span id="seconds"></span>
     </div>
   </div>

   Copier après la connexion

   L'effet de compte à rebours sera affiché dans l'élément div avec l'identifiant "compte à rebours".

2. Ajouter un style CSS :

   #countdown {
     text-align: center;
   }
   
   .timer {
     display: inline-block;
     font-size: 30px;
     background-color: #000;
     color: #fff;
     padding: 10px 20px;
   }
   
   .timer span {
     margin: 0 5px;
     font-weight: bold;
   }
   

   Copier après la connexion

   En définissant le style, l'effet du compte à rebours sera affiché au centre de la page et le style du numéro du compte à rebours sera défini.

3. Ajouter du code JavaScript :
   Tout d'abord, introduisez la bibliothèque jQuery :

   <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

   Copier après la connexion

   Ensuite, écrivez la logique du compte à rebours :

   function countdown(endDate) {
     var timer;
     var daysSpan = $('#days');
     var hoursSpan = $('#hours');
     var minutesSpan = $('#minutes');
     var secondsSpan = $('#seconds');
   
     function calculate() {
    var now = new Date();
    var remainingTime = endDate.getTime() - now.getTime();
   
    var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
   
    daysSpan.text(days);
    hoursSpan.text(('0' + hours).slice(-2));
    minutesSpan.text(('0' + minutes).slice(-2));
    secondsSpan.text(('0' + seconds).slice(-2));
   
    if (remainingTime <= 0) {
      clearInterval(timer);
    }
     }
   
     function start() {
    calculate();
    timer = setInterval(calculate, 1000);
     }
   
     start();
   }
   
   // 设置倒计时结束时间为：2023年1月1日
   var endDate = new Date('2023-01-01T00:00:00');
   countdown(endDate);

   Copier après la connexion

   Le code ci-dessus définit une fonction de compte à rebours countdown, en obtenant l'heure actuelle et l'heure de fin spécifiée, calcule les jours, heures, minutes et secondes restants et les affiche sur la page HTML. countdown，通过获取当前时间和指定的结束时间，计算剩余的天数、小时数、分钟数和秒数，并将它们显示在HTML页面上。

代码解析：

• clearInterval(timer)用于停止定时器，当倒计时结束时，定时器将停止运行。
• setInterval(calculate, 1000)

Analyse du code :

clearInterval(timer) est utilisé pour arrêter le chronomètre. Lorsque le compte à rebours se termine, le chronomètre s'arrête.
• setInterval(calculate, 1000) Définissez la fonction de calcul à appeler toutes les secondes pour obtenir un compte à rebours de mise à jour en temps réel.

Remarque :

Veuillez vous assurer que le fichier de la bibliothèque jQuery est correctement introduit avant d'utiliser l'exemple de code ci-dessus. 🎜🎜Afin de répondre aux tailles d'écran de différents appareils, vous pouvez utiliser des requêtes multimédias et des types de médias CSS pour que les effets de compte à rebours aient de bons effets d'affichage sur différents appareils. 🎜🎜🎜Résumé : 🎜Grâce à HTML, CSS et jQuery, nous pouvons facilement implémenter un effet de compte à rebours réactif. Espérons que les exemples de code fournis dans cet article vous aideront à utiliser la fonctionnalité de compte à rebours dans vos propres projets. 🎜

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!