第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何用JS為多個元素創(chuàng)建一個數(shù)字計數(shù)器？

如何用JS為多個元素創(chuàng)建一個數(shù)字計數(shù)器？

墨色風(fēng)雨 2023-04-20 16:59:35
我正在嘗試創(chuàng)建一個從 0 到 innerHTML 數(shù)值的計數(shù)器。我讓它為第一個元素工作，但無法弄清楚如何跨多個數(shù)字元素應(yīng)用該事件function animateValue(id, start, end, duration) {    var range = end - start;    var current = start;    var increment = end > start? 1 : -1;    var stepTime = Math.abs(Math.floor(duration / range));    var obj = document.querySelectorAll(id);    var end = obj.innerHTML;    var timer = setInterval(function() {        current += increment;        obj.innerHTML = current;        if (current == end) {            clearInterval(timer);        }    }, stepTime);}animateValue("value", 0, 3000);.value {    font-size: 50px;}<div class="value">244</div><div class="value">64,244</div><div class="value">1,100,244</div>
查看完整描述

1 回答

?
心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個贊

在 JavaScript 中，你不能在不迭代的情況下對多個元素進(jìn)行更改。所以，你必須animateValue為每個.value元素調(diào)用函數(shù)。start通常為零，所以你可以把它作為最后一個參數(shù)，并給它默認(rèn)值。而代替innerHTML，利用innerText。兩者都會起作用，但它們有自己的作用。


function animateValue(item, duration, start = 0) {

  var end = item.innerText.replaceAll(",", "").trim();

  var range = end - start;

  var increment = (range / (duration / 10));

  

  if(end < start){

    increment *= -1;

  }

  var current = start;

  var stepTime = 1;

  

  var timer = setInterval(function() {

    current += Math.ceil(increment);

    item.innerText = current;

    if (current >= end) {

      item.innerText = end;

      clearInterval(timer);

    }

  }, stepTime);

}


document.querySelectorAll('.value').forEach((item)=>{

  animateValue(item, 3000);

});

.value {

  font-size: 50px;

}

<div class="value">244</div>

<div class="value">1,624</div>

<div class="value">1,100,244</div>


查看完整回答
反對 回復(fù) 2023-04-20
  • 1 回答
  • 0 關(guān)注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號