Comment écrire un compte à rebours en jquery

Avec le développement rapide d'Internet, la fonction de compte à rebours est devenue l'une des exigences courantes dans le développement de sites Web. La manière la plus courante d'implémenter le compte à rebours dans les pages frontales consiste à utiliser le plug-in jQuery dans la bibliothèque JavaScript.

Cet article vous présentera la méthode spécifique d'utilisation du plug-in jQuery pour implémenter la fonction de compte à rebours sur les pages Web.

1. Créez un bloc de compte à rebours en HTML

Vous devez d'abord créer un bloc de compte à rebours dans la page HTML, par exemple :

<div id="countdown">
  <div class="countdown-section">
    <span class="countdown-amount days">0</span>
    <div class="countdown-period">Days</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount hours">0</span>
    <div class="countdown-period">Hours</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount minutes">0</span>
    <div class="countdown-period">Minutes</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount seconds">0</span>
    <div class="countdown-period">Seconds</div>
  </div>
</div>

Ici , nous utilisons un div avec quatre éléments enfants, chaque élément enfant correspond à une dimension temporelle, comprenant les jours, les heures, les minutes et les secondes. Parmi eux, chaque dimension temporelle est composée d'un élément span et d'un élément div. L'élément span sera utilisé pour afficher les données temporelles en temps réel sur la page Web, tandis que l'élément div sera utilisé pour afficher la dimension temporelle.

2. Présentez le plug-in jQuery

Avant d'implémenter la fonction de compte à rebours, la bibliothèque jQuery doit être ajoutée à la page. Ajoutez le code suivant à votre HTML :

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

Avant d'utiliser le plugin de compte à rebours pour implémenter le compte à rebours, nous devons ajouter le plugin de compte à rebours lui-même au fichier HTML.

3. Introduisez le plug-in de compte à rebours et implémentez le compte à rebours

<script src="jquery.countdown.js"></script>
<script>
  $('#countdown').countdown('2022/01/01', function(event) {
    $(this).html(event.strftime('<div class="countdown-section"><span class="countdown-amount days">%D</span><div class="countdown-period">Days</div></div><div class="countdown-section"><span class="countdown-amount hours">%H</span><div class="countdown-period">Hours</div></div><div class="countdown-section"><span class="countdown-amount minutes">%M</span><div class="countdown-period">Minutes</div></div><div class="countdown-section"><span class="countdown-amount seconds">%S</span><div class="countdown-period">Seconds</div></div>'));
  });
</script>

Ce code ajoutera une fonction de compte à rebours au bloc de compte à rebours jusqu'au 01/01/2022. Dans le même temps, le contenu HTML représentant l'heure sera créé par celui-ci.

4. Détails d'implémentation du plug-in personnalisé

Maintenant, nous avons implémenté avec succès un effet de compte à rebours de base sur la page. Cependant, cet effet peut être davantage personnalisé.

Par exemple, nous pouvons définir les actions qui doivent être effectuées après la fin du compte à rebours :

<script>
  $('#countdown').countdown('2022/01/01', function(event) {
    $(this).html(event.strftime('<div class="countdown-section"><span class="countdown-amount days">%D</span><div class="countdown-period">Days</div></div><div class="countdown-section"><span class="countdown-amount hours">%H</span><div class="countdown-period">Hours</div></div><div class="countdown-section"><span class="countdown-amount minutes">%M</span><div class="countdown-period">Minutes</div></div><div class="countdown-section"><span class="countdown-amount seconds">%S</span><div class="countdown-period">Seconds</div></div>'));
  }).on('finish.countdown', function(event) {
    $(this).html('The countdown is finished!');
  });
</script>

Dans ce code, nous ajoutons une fonction de rappel après la fin du compte à rebours, donc qu'une fois le compte à rebours terminé, le bloc de compte à rebours affichera "Le compte à rebours est terminé !".

En plus de définir la fonction de rappel, nous pouvons également utiliser d'autres attributs pour personnaliser le comportement du compte à rebours. Par exemple, nous pouvons définir la fréquence des mises à jour du compte à rebours :

$('#countdown').countdown('2022/01/01', { 
  interval: 1000 
}, function(event) {
  // ...
});

Ici, nous définissons le bloc du compte à rebours pour qu'il soit mis à jour toutes les 1000 millisecondes.

5. Résumé

Utiliser le plug-in jQuery pour implémenter le compte à rebours est une exigence courante dans le développement front-end. En utilisant le plug-in jQuery, nous pouvons ajouter très simplement un effet de compte à rebours magnifique et pratique au site Web. Dans cet article, nous fournissons une solution de mise en œuvre de compte à rebours de base et présentons également comment implémenter davantage d'exigences fonctionnelles via des attributs de plug-in personnalisés.

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!