這篇文章為大家帶來了關於JavaScript的相關知識，其中主要介紹了關於怎麼實現數值動態變化的相關內容，下面一起來看一下，希望對大家有幫助。
【相關推薦：JavaScript影片教學、web前端】
效果如下：
話不多說，直接上程式碼：
HTML檔：
<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>
程式碼解析：
在這裡寫了一個大容器包含了三個小容器，每個小容器中的資料展示使用data -*屬性
(註:data-*用於儲存頁面或應用程式的私有自訂數據，賦予我們在所有HTML 元素上嵌入自訂data 屬性的能力，儲存的（自訂）資料能夠被頁面的JavaScript 中利用，以創造更好的使用者體驗（不進行Ajax 呼叫或伺服器端資料庫查詢）)
我們這裡就把我們自訂的資料(37062，10210，10045)傳入，以便在js中使用.
css檔案：
#
* {
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;
}
}程式碼解析:
##css檔案很簡單啦，就使用了flex
js檔案：#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let counters = document.querySelectorAll(&#39;.counter&#39;) //获取到三个counter盒子counters.forEach(item => {
item.innerText = &#39;0&#39; //记录分数变化的变量，初始值为0
const updateData = () => {
const data = +item.getAttribute(&#39;data-set&#39;) //获取到元素中绑定的数据
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() //调用函数，启动函数})</pre><div class="contentsignin">登入後複製</div></div>程式碼解析:<li>
<p><code>資料的動態改變邏輯在這裡咯！ 首先就要
方法遍歷我們取得的三個盒子，初始的分數是為0的，因此我們把盒子的innerText設定為了0(注意：這裡的0是一個字串)
updateData,隨後獲取到我們之前自定義的數據，在這裡有部分朋友看到 item.getAttribute(data-set)估計都懵逼了，為啥 符號在前面呢？
#然後定義一個臨時變數
tmp，目的在於保存item.innerText
在這裡是除以了200，除以的資料約大，那麼變化的速率越慢，反之則快
然後去做一個判斷(讓臨時量與總量做比較)，如果臨時量小於總量，就讓###臨時量tmp###與###資料變化量changeData###相加，做一個取整，如果不滿足判斷條件，直接渲染資料即可(這時的資料已經是最終的資料了,也就是我們的自訂資料)#############實作資料的動態變化，最核心的還是###計時器## #，在滿足判斷條件的作用域中啟動定時器，傳入回調函數###updateData###，實現###1ms###呼叫一次，資料變化看著很絲滑.##### #############寫在最後:###### js的實作邏輯一步步的來，會發現邏輯很清晰，希望大家在寫js程式碼的時候，一步步下手，不然很容易邏輯混亂，以後的話沒事會給大家分享一些###js###小demo，一起去搞一些好玩的東西！在娛樂的同時還能提升js的開發能力！ ######【相關推薦：###JavaScript影片教學###、###web前端###】###以上是實例JavaScript之實現數值的動態變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
