Example JavaScript to implement dynamic changes in numerical values

This article brings you relevant knowledge about JavaScript, which mainly introduces the relevant content on how to achieve dynamic changes in numerical values. Let's take a look at it together. I hope it will be helpful to everyone.

[Related recommendations: JavaScript video tutorial, web front-end]

The effect is as follows:

---

Without further ado, let’s go straight to the code:

HTML file:

  <div>
    <div>
      <i></i>
      <div></div>
      <span>常规赛总得分</span>
    </div>

    <div>
      <i></i>
      <div></div>
      <span>常规赛总篮板</span>
    </div>

    <div>
      <i></i>
      <div></div>
      <span>常规赛总助攻</span>
    </div>
  </div>

Code analysis:

Here I wrote a large container that contains three small containers. The data in each small container is displayed using data -*Attributes
(Note:data-* is used to store private custom data for a page or application, giving us the ability to embed ## on all HTML elements #Custom data attributeThe ability to store (custom) datacan be utilized in the page's JavaScript to create a better user experience (without making Ajax calls or server-side Database query)) Here we will pass in our customized data (
37062, 10210, 10045) so that it can be used in js Used in .

---

css file:

* {
    box-sizing: border-box;
  }
  
 .outer {
    background-color: #8e44ad;
    color: #fff;
    font-family: 'Roboto Mono', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    overflow: hidden;
    margin: 0;
  }
  
  .counter-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 30px 50px;
  }
  
  .counter {
    font-size: 60px;
    margin-top: 10px;
  }
  
  @media (max-width: 580px) {
    .outer {
      flex-direction: column;
    }
  }

Code analysis:# The ##css file is very simple. It uses the

flex

layout, and finally adds a media query to adapt to changes in screen size. You can take a look at it yourself.

---

js file:

let counters = document.querySelectorAll('.counter')  //获取到三个counter盒子counters.forEach(item => {
    item.innerText = '0'  //记录分数变化的变量，初始值为0

    const updateData = () => {
        const data = +item.getAttribute('data-set')  //获取到元素中绑定的数据
        const tmp = +item.innerText //临时变量保存变化一次的数据量
    
        const changeData = data / 200  //设置改变的速率

        if(tmp < data) {  //如果临时变量的值小于最终数据的值，那么就给元素进行数据相加
            item.innerText = `${Math.ceil(tmp + changeData)}`  //值数相加，然后进行取整
            setTimeout(updateData,1)  //定时器传入回调函数目的在于动态变化
        } else {
            item.innerText = data  //不满足条件后，证明得到了最终数据，直接渲染
        }

    }
    updateData()  //调用函数，启动函数})

Code analysis:The dynamic change logic of data is here!

First we need to
• get the three divs

  that store the data, and then traverse the three boxes we got through the foreach method. The initial The score is 0, so we set the innerText of the box to 0 (note: 0 here is a string)

Then define a method to update data
• updateData

  , and then obtain the data we customized before. Some friends here may be confused when they see item.getAttribute(data-set) Okay, why is the symbol in front? means that the following number is a positive number, which is equivalent to telling the compiler that the numerical type to be assigned is a numeric type, do not concatenate the numbers as strings

Then define a temporary variable
• tmp

  , the purpose is to save the changed value in item.innerText, and then set the rate of data changeHere is Divided by 200, the divided data is approximately larger, then the slower the rate of change, and vice versa

Then make a judgment (let the temporary amount and the total amount do Comparison), if the temporary amount is less than the total amount, add the
• temporary amount tmp

  and the data change amount changeData, and make a round. If the judgment condition is not met, the data will be rendered directly. But (the data at this time is already the final data, that is, our custom data)

To achieve dynamic changes in data, the core thing is
• Timer

  , start the timer in the scope that meets the judgment conditions, pass in the callback function updateData, implement 1ms call once, the data changes look very smooth.

---

Written at the end:

If you follow the implementation logic of js step by step, you will find that the logic is very clear. I hope everyone can start step by step when writing js code. , otherwise it will be easy to mess up the logic. In the future, I will share with you some js
small demos, and let’s make some fun things together! While having fun, you can also improve your js development capabilities! 【Related recommendations:

JavaScript video tutorial

, web front-end】

The above is the detailed content of Example JavaScript to implement dynamic changes in numerical values. For more information, please follow other related articles on the PHP Chinese website!