How to keep changing numbers in JavaScript

With the continuous development and progress of JavaScript, more and more people are beginning to try various magical techniques and special effects to enhance the functionality and beauty of the website. Among them, dynamically changing numbers is a common and practical technique that can attract users' attention, enhance interactive experience, and thereby improve the user retention rate and conversion rate of the website. So, how to implement changing numbers using JavaScript? Next, this article will introduce the implementation methods and techniques in detail.

1. Use native JavaScript to realize self-increment and self-decrement of numbers

The most basic method to realize self-increment and self-decrement of numbers is to use native JavaScript to implement simple addition and subtraction operations. This can be achieved through buttons on the page or automatic triggering, for example:

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

This code adds a counter to the page, and then uses the "Increase" and "Decrease" buttons to increase and decrease the number. Through JavaScript DOM operations, HTML elements in the page can be dynamically modified and numbers updated.

2. Use jQuery to realize automatic increment and decrement of numbers

jQuery is a popular JavaScript library that can simplify the writing of JavaScript code and improve development efficiency. If you use jQuery, you can use the following code to realize the increment and decrement of numbers:

100db36a723c770d327fc0aef2ce13b1
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

This code defines the click events of two buttons. Each click event will modify the content of the corresponding HTML element through jQuery's html() method, thereby realizing the automatic increment of the number. and self-decreasing.

3. Use CSS3 animation to achieve digital scrolling effect

In page design, digital increment and decrement can achieve more vivid effects through CSS3 animation, such as scrolling of numbers, Flip and other effects. The following code demonstrates how to achieve a numerical scrolling effect through CSS3:

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
73a6ac4ed44ffec12cee46588e518a5e

In this code, we define an HTML element with class "box", and then use CSS3 animation effects to Controls the scrolling effect of the child element with the class name "roll". The JavaScript code implements the increment and decrement of numbers, obtains the reference of the HTML element through the querySelector() method, and then dynamically modifies the value of the number. When the numbers change, the CSS3 animation effect will be automatically triggered, thereby achieving a vivid and dynamic digital scrolling effect.

4. Use ready-made JavaScript libraries to implement digital special effects

In addition to native JavaScript and jQuery, there are many ready-made JavaScript libraries that can directly implement digital special effects. For example, CountUp.js is a library specifically used for automatic increment and decrement of numbers, and can realize the customization of a variety of special effects, styles and parameters. Using the CountUp.js library, you only need to introduce the corresponding code and library files in HTML, and then set the parameters of the animation effect to realize the increment and decrement of numbers, for example:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<p id="counter"></p>
<button onclick="startCounter()">开始</button>
<button onclick="stopCounter()">停止</button>
<script>
  var countUp = new CountUp("counter", 0, 1000, 0, 2);
  function startCounter() {
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
  function stopCounter() {
    countUp.reset();
  }
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

This This code uses the CountUp.js library to implement simple number auto-increment. You can start and stop the number auto-increment animation effect through the start() method and the reset() method (the animation parameters can be customized). The library also provides a wealth of special effects, styles and callback function functions, which can meet various practical needs for digital special effects.

Summary

Through the above methods and techniques, we can achieve the dynamic change effect of numbers in Web pages, thereby enhancing the user's interactive experience and the beauty of the page. Of course, different methods, techniques and library files have their own advantages, disadvantages and applicable scenarios. In actual development, we need to select the most appropriate method to achieve dynamic changes in numbers based on page requirements, technical implementation difficulty, maintenance costs and other factors, thereby improving the user experience and competitiveness of the website.

The above is the detailed content of How to keep changing numbers in JavaScript. For more information, please follow other related articles on the PHP Chinese website!