JavaScript如何實現數值的動態變化

這篇“JavaScript如何實現數值的動態變化”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript如何實現數值的動態變化”文章吧。

效果如下：

話不多說，直接上代碼：

HTML文件：

  <div class="outer">
    <div class="counter-container">
      <i class="iconfont icon-Basket-Ball" style="font-size:50px"></i>
      <div class="counter" data-set="37062"></div>
      <span>常規賽總得分</span>
    </div>

    <div class="counter-container">
      <i class="iconfont icon-BasketballHoop" style="font-size:50px"></i>
      <div class="counter" data-set="10210"></div>
      <span>常規賽總籃板</span>
    </div>

    <div class="counter-container">
      <i class="iconfont icon-assistant" style="font-size:50px"></i>
      <div class="counter" data-set="10045"></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文件：

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()  //調用函數，啟動函數})

代碼解析:

數據的動態改變邏輯在這里咯！

• 首先就要獲取到儲存數據的三個div，然后通過foreach方法遍歷我們獲取的三個盒子，初始的分數是為0的，因此我們把盒子的innerText設置為了0(注意：這里的0是一個字符串)

• 隨后定義一個更新數據的方法updateData,隨后獲取到我們之前自定義的數據，在這里有部分朋友看到+item.getAttribute(data-set)估計都懵逼了，為啥+符號在前面呢？+代表后面的數字為正數,相當于告訴編譯器，即將賦值的數值類型為數字類型，不要把數字當作字符串去拼接

• 然后定義一個臨時變量tmp，目的在于保存item.innerText中變化后的數值，接下來設置數據變化的速率在這里是除以了200，除以的數據約大，那么變化的速率越慢，反之則快

• 隨后去做一個判斷(讓臨時量與總量做對比)，如果臨時量小于總量，就讓臨時量tmp與數據變化量changeData相加，做一個取整，如果不滿足判斷條件，直接渲染數據即可(這時的數據已經是最終的數據了,也就是我們的自定義數據)

• 實現數據的動態變化，最核心的還是定時器，在滿足判斷條件的作用域中啟動定時器，傳入回調函數updateData，實現1ms調用一次，數據變化看著很絲滑.

以上就是關于“JavaScript如何實現數值的動態變化”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。