已解決430363個問題，去搜搜看，總會有你想問的

如何用JS為多個元素創建一個數字計數器？

首頁猿問如何用JS為多個元素創建一個數字計數器？

如何用JS為多個元素創建一個數字計數器？

JavaScript

墨色風雨 2023-04-20 16:59:35

我正在嘗試創建一個從 0 到 innerHTML 數值的計數器。我讓它為第一個元素工作，但無法弄清楚如何跨多個數字元素應用該事件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貢獻1866條經驗獲得超5個贊

在 JavaScript 中，你不能在不迭代的情況下對多個元素進行更改。所以，你必須animateValue為每個.value元素調用函數。start通常為零，所以你可以把它作為最后一個參數，并給它默認值。而代替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;

}

反對回復 2023-04-20

1 回答
0 關注
137 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何用JS為多個元素創建一個數字計數器？

如何用JS為多個元素創建一個數字計數器？

1 回答

添加回答

如何用JS為多個元素創建一個數字計數器？