Comment continuer à changer les nombres en JavaScript

Avec le développement et l'avancement continus de JavaScript, de plus en plus de personnes commencent à essayer diverses techniques magiques et effets spéciaux pour améliorer la fonctionnalité et la beauté du site Web. Parmi eux, l'évolution dynamique des chiffres est une technique courante et pratique qui peut attirer l'attention des utilisateurs, améliorer l'expérience interactive et ainsi améliorer le taux de rétention des utilisateurs et le taux de conversion du site Web. Alors, comment implémenter la modification des nombres à l'aide de JavaScript ? Ensuite, cet article présentera en détail les méthodes et techniques de mise en œuvre.

1. Utilisez JavaScript natif pour implémenter l'incrémentation et la décrémentation des nombres

La méthode la plus basique pour implémenter l'incrémentation et la décrémentation des nombres consiste à utiliser du JavaScript natif pour implémenter une addition et une soustraction simples opérations . Cela peut être réalisé via des boutons sur la page ou un déclenchement automatique, par exemple :

100db36a723c770d327fc0aef2ce13b1
6c04bd5ca3fcae76e30b72ad730ca86d

<p id="count">0</p>
<button onclick="increase()">增加</button>
<button onclick="decrease()">减少</button>
<script>
  var count = 0;
  function increase() {
    count++;
    document.getElementById("count").innerHTML = count;
  }
  function decrease() {
    count--;
    document.getElementById("count").innerHTML = count;
  }
</script>

36cc49f0c466276486e50c850b7e4956 #🎜🎜 #73a6ac4ed44ffec12cee46588e518a5e

Ce code ajoute un compteur à la page, puis utilise les boutons "Augmenter" et "Diminuer" pour augmenter et diminuer le nombre. Grâce à l'opération DOM de JavaScript, vous pouvez modifier dynamiquement les éléments HTML de la page et mettre à jour les numéros.

2. Utilisez jQuery pour réaliser une incrémentation et une décrémentation automatiques des nombres

jQuery est une bibliothèque JavaScript populaire qui peut simplifier l'écriture de code JavaScript et améliorer l'efficacité du développement. Si vous utilisez jQuery, vous pouvez utiliser le code suivant pour réaliser l'incrémentation et la décrémentation des nombres : ;/ body>

73a6ac4ed44ffec12cee46588e518a5e

Ce code définit les événements de clic de deux boutons, modifiant ainsi l'élément HTML correspondant via la méthode html() de jQuery. réaliser les nombres auto-croissants et auto-décroissants.

3. Utilisez l'animation CSS3 pour obtenir un effet de défilement numérique

Dans la conception de pages, l'incrémentation et la décrémentation numériques peuvent obtenir des effets plus vifs grâce à l'animation CSS3, par exemple le défilement des nombres, le retournement et d'autres effets. Le code suivant montre comment obtenir un effet de défilement numérique via CSS3 : 6c04bd5ca3fcae76e30b72ad730ca86d

<p id="count">0</p>
<button id="increase">增加</button>
<button id="decrease">减少</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $("#increase").click(function() {
      $("#count").html(function(i, val) {
        return Number(val) + 1;
      });
    });
    $("#decrease").click(function() {
      $("#count").html(function(i, val) {
        return Number(val) - 1;
      });
    });
  });
</script>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

In ce code, nous définissons une classe comme élément HTML "box", puis utilisons des effets d'animation CSS3 pour contrôler l'effet de défilement de l'élément enfant avec le nom de classe "roll". Le code JavaScript implémente l'incrémentation et la décrémentation des nombres, obtient la référence de l'élément HTML via la méthode querySelector(), puis modifie dynamiquement la valeur du nombre. Lorsque les chiffres changent, l'effet d'animation CSS3 est automatiquement déclenché, obtenant ainsi un effet de défilement numérique vif et dynamique.

4. Utilisez des bibliothèques JavaScript prêtes à l'emploi pour implémenter des effets spéciaux numériques

En plus du JavaScript natif et de jQuery, il existe de nombreuses bibliothèques JavaScript prêtes à l'emploi qui peuvent directement implémenter le numérique effets spéciaux. Par exemple, CountUp.js est une bibliothèque spécifiquement utilisée pour l'incrémentation et la décrémentation automatiques des nombres, et peut réaliser la personnalisation d'une variété d'effets spéciaux, de styles et de paramètres. En utilisant la bibliothèque CountUp.js, il vous suffit d'introduire le code et les fichiers de bibliothèque correspondants en HTML, puis de définir les paramètres de l'effet d'animation pour réaliser l'incrémentation et la décrémentation des nombres, par exemple :

100db36a723c770d327fc0aef2ce13b1# 🎜🎜# 93f0f5c25f18dab9d176bd4f6de5d30e

<style>
  .box {
    width: 150px;
    height: 30px;
    font-size: 24px;
    font-weight: bold;
    color: black;
    overflow: hidden;
  }
  .roll {
    animation-name: num-roll;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes num-roll {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }
</style>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<div class="box">
  <span class="roll">0</span>
</div>
<button onclick="increase()">增加</button>
<button onclick="decrease()">减少</button>
<script>
  var count = 0;
  function increase() {
    count++;
    document.querySelector(".roll").innerHTML = count;
  }
  function decrease() {
    count--;
    document.querySelector(".roll").innerHTML = count;
  }
</script>

36cc49f0c466276486e50c850b7e4956#🎜 🎜#38cfdec836742c2ff0d15d10ead67f5d

Ce code utilise la bibliothèque CountUp.js pour implémenter une simple incrémentation automatique de nombres. Vous pouvez démarrer et arrêter l'effet d'animation d'incrémentation automatique de nombres via la méthode start() et la méthode reset() (les paramètres d'animation peuvent être personnalisés). La bibliothèque fournit également une multitude d'effets spéciaux, de styles et de fonctions de rappel, qui peuvent répondre à divers besoins pratiques en matière d'effets spéciaux numériques.

Summary

Grâce aux méthodes et techniques ci-dessus, nous pouvons obtenir l'effet de changement dynamique des nombres dans les pages Web, améliorant ainsi l'expérience interactive de l'utilisateur et la beauté de la page. Bien entendu, différentes méthodes, techniques et fichiers de bibliothèque ont leurs propres avantages, inconvénients et scénarios applicables. Dans le développement réel, nous devons sélectionner la méthode la plus appropriée pour obtenir des changements dynamiques de nombres en fonction des exigences des pages, des difficultés techniques de mise en œuvre, des coûts de maintenance et d'autres facteurs, améliorant ainsi l'expérience utilisateur et la compétitivité du site Web.

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!