超好玩js頁面效果之實現(xiàn)數(shù)值的動態(tài)變化

更新時間：2022年10月16日 11:19:40 作者：前端小白在前進

這篇文章主要給大家介紹了關于超好玩js頁面效果之實現(xiàn)數(shù)值的動態(tài)變化的相關資料,文中通過示例代碼及圖文介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下

前言

好兄弟們，今天給大家?guī)硪粋€非常好玩的js小demo，實現(xiàn)數(shù)值的動態(tài)變化！這個效果之前在清華大學的官網上見到過(現(xiàn)在他們把這個效果給取消了)，之前覺得這個效果挺好玩的，這些天在復習js的時候，無意間見到了這效果，于是寫了一個，想分享給大家，嘻嘻嘻！??????

效果如下：

話不多說，直接給好兄弟們上代碼：

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>常規(guī)賽總得分</span>
    </div>

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

    <div class="counter-container">
      <i class="iconfont icon-assistant" style="font-size:50px"></i>
      <div class="counter" data-set="10045"></div>
      <span>常規(guī)賽總助攻</span>
    </div>
  </div>

代碼解析：

在這里寫了一個大容器包含了三個小容器，每個小容器中的數(shù)據展示使用data-*屬性
(注:data-*用于存儲頁面或應用程序的私有自定義數(shù)據，賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力，存儲的（自定義）數(shù)據能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行 Ajax 調用或服務器端數(shù)據庫查詢）)
我們這里就把我們自定義的數(shù)據(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'  //記錄分數(shù)變化的變量，初始值為0

    const updateData = () => {
        const data = +item.getAttribute('data-set')  //獲取到元素中綁定的數(shù)據
        const tmp = +item.innerText //臨時變量保存變化一次的數(shù)據量
    
        const changeData = data / 200  //設置改變的速率

        if(tmp < data) {  //如果臨時變量的值小于最終數(shù)據的值，那么就給元素進行數(shù)據相加
            item.innerText = `${Math.ceil(tmp + changeData)}`  //值數(shù)相加，然后進行取整
            setTimeout(updateData,1)  //定時器傳入回調函數(shù)目的在于動態(tài)變化
        } else {
            item.innerText = data  //不滿足條件后，證明得到了最終數(shù)據，直接渲染
        }

    }
    updateData()  //調用函數(shù)，啟動函數(shù)
})

代碼解析:

數(shù)據的動態(tài)改變邏輯在這里咯！

首先就要獲取到儲存數(shù)據的三個div，然后通過foreach方法遍歷我們獲取的三個盒子，初始的分數(shù)是為0的，因此我們把盒子的innerText設置為了0(注意：這里的0是一個字符串)
隨后定義一個更新數(shù)據的方法updateData,隨后獲取到我們之前自定義的數(shù)據，在這里有部分朋友看到+item.getAttribute(data-set)估計都懵逼了，為啥+符號在前面呢？+代表后面的數(shù)字為正數(shù),相當于告訴編譯器，即將賦值的數(shù)值類型為數(shù)字類型，不要把數(shù)字當作字符串去拼接
然后定義一個臨時變量tmp，目的在于保存item.innerText中變化后的數(shù)值，接下來設置數(shù)據變化的速率在這里是除以了200，除以的數(shù)據約大，那么變化的速率越慢，反之則快
隨后去做一個判斷(讓臨時量與總量做對比)，如果臨時量小于總量，就讓臨時量tmp與數(shù)據變化量changeData相加，做一個取整，如果不滿足判斷條件，直接渲染數(shù)據即可(這時的數(shù)據已經是最終的數(shù)據了,也就是我們的自定義數(shù)據)
實現(xiàn)數(shù)據的動態(tài)變化，最核心的還是定時器，在滿足判斷條件的作用域中啟動定時器，傳入回調函數(shù)updateData，實現(xiàn)1ms調用一次，數(shù)據變化看著很絲滑.