前言

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

效果如下：

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

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>

代碼解析：

在這里寫了一個(gè)大容器包含了三個(gè)小容器，每個(gè)小容器中的數(shù)據(jù)展示使用data-*屬性
(注:data-*用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)，賦予我們?cè)谒?HTML 元素上嵌入自定義 data 屬性的能力，存儲(chǔ)的（自定義）數(shù)據(jù)能夠被頁(yè)面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗(yàn)（不進(jìn)行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫(kù)查詢）)
我們這里就把我們自定義的數(shù)據(jù)(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文件很簡(jiǎn)單啦，就使用了flex布局，最后小加了一個(gè)媒體查詢來(lái)適應(yīng)屏幕尺寸變化，大家自行看吧。

js文件：

let counters = document.querySelectorAll('.counter')  //獲取到三個(gè)counter盒子

counters.forEach(item => {
    item.innerText = '0'  //記錄分?jǐn)?shù)變化的變量，初始值為0

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

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

    }
    updateData()  //調(diào)用函數(shù)，啟動(dòng)函數(shù)
})

代碼解析:

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

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

寫在最后:

js的實(shí)現(xiàn)邏輯一步步的來(lái)，會(huì)發(fā)現(xiàn)邏輯很清晰，希望大家在寫js代碼的時(shí)候，一步步下手，要不然很容易邏輯混亂，以后的話沒(méi)事會(huì)給大家分享一些js小demo，一起去搞一些好玩的東西！在娛樂(lè)的同時(shí)還能提高js的開發(fā)能力?。?！????

到此這篇關(guān)于超好玩js頁(yè)面效果之實(shí)現(xiàn)數(shù)值的動(dòng)態(tài)變化的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)數(shù)值動(dòng)態(tài)變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論