Example JavaScript to implement dynamic changes in numerical values

This article brings you relevant knowledge aboutJavaScript, 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:

 
  
 常规赛总得分 
 
  
 常规赛总篮板 
 
  
 常规赛总助攻 
 

Code analysis:

Here I wrote a large container that contains three small containers. The data in each small container is displayed usingdata -*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 JavaScriptto 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 amedia queryto 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

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 theforeachmethod. The initial The score is 0, so we set theinnerTextof the box to 0 (note:0here 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 seeitem.getAttribute(data-set)Okay, why is thesymbol in front?means that the following number is a positive number, which is equivalent to telling the compiler thatthe 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 initem.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 thedata 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 functionupdateData, implement1mscall 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 somejs
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!