範例JavaScript之實現數值的動態變化

本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於怎麼實現數值動態變化的相關內容，下面一起來看一下，希望對大家有幫助。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

【相關推薦：、】

效果如下：

在這裡插入圖片描述

話不多說，直接上程式碼：

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呼叫一次，資料變化看著很絲滑.

寫在最後:
js的實現邏輯一步步的來，會發現邏輯很清晰，希望大家在寫js程式碼的時候，一步步下手，要不然很容易邏輯混亂，以後的話沒事會給大家分享一些js小demo，一起去搞一些好玩的東西！在娛樂的同時還能提高js的開發能力！

【相關推薦：、】

以上就是範例JavaScript之實現數值的動態變化的詳細內容，更多請關注TW511.COM其它相關文章！