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

這篇文章為大家帶來了關於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(&amp;#39;.counter&amp;#39;) //获取到三个counter盒子counters.forEach(item =&gt; { item.innerText = &amp;#39;0&amp;#39; //记录分数变化的变量，初始值为0 const updateData = () =&gt; { const data = +item.getAttribute(&amp;#39;data-set&amp;#39;) //获取到元素中绑定的数据 const tmp = +item.innerText //临时变量保存变化一次的数据量 const changeData = data / 200 //设置改变的速率 if(tmp &lt; data) { //如果临时变量的值小于最终数据的值，那么就给元素进行数据相加 item.innerText = `${Math.ceil(tmp + changeData)}` //值数相加，然后进行取整 setTimeout(updateData,1) //定时器传入回调函数目的在于动态变化 } else { item.innerText = data //不满足条件后，证明得到了最终数据，直接渲染 } } updateData() //调用函数，启动函数})</pre><div class="contentsignin">登入後複製</div></div>程式碼解析:<li> <p><code>資料的動態改變邏輯在這裡咯！ 首先就要

  取得到儲存資料的三個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影片教學###、###web前端###】###

以上是實例JavaScript之實現數值的動態變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！