Question

我尝试使用javascript和setInterval在同一页面上创建多个计数器。

我的代码中的问题是它只更新了最后一个元素。

var newvalue;
var counterworld = document.getElementsByClassName('counterworld');
for (var i = 0; i < counterworld.length; ++i) {
    var item = counterworld[i];
    var counterId = setInterval(function () { item.innerHTML = i + '=>' + countUp(item.getAttribute('data-start'), item.getAttribute('data-increment')) }, 100);
}
function countUp(start, increment) {
    if (newvalue == null) {
        newvalue = parseFloat(start) + parseFloat(increment);
    }
    else {
        newvalue = newvalue + parseFloat(increment);
    }
    if (increment < 1) {
       return newvalue.toLocaleString(undefined, { maximumFractionDigits: 2 });
}
else {
    return newvalue.toLocaleString(undefined, { maximumFractionDigits: 0 });

    }
}

<span class="counterworld" data-increment="1.5" data-start="100">100</span><br />
<span class="counterworld" data-increment="1.28600823045268" data-start="19216060382458.4">19216060382458.4</span><br />
<span class="counterworld" data-increment="0.0317532880531423" data-start="4629347058.7918">4629347058.7918</span>

Answer 1

var i将let i更改为var item，将let item更改为var counterworld = document.getElementsByClassName('counterworld'); for (let i = 0; i < counterworld.length; ++i) { let item = counterworld[i]; let value = parseFloat(item.getAttribute('data-start')); let increment = parseFloat(item.getAttribute('data-increment')); setInterval(function() { value += increment; item.innerHTML = i + '=>' + value.toLocaleString(undefined, { maximumFractionDigits: increment < 1 ? 2 : 0 }); }, 100); }：

<span class="counterworld" data-increment="1.5" data-start="100">100</span><br />
<span class="counterworld" data-increment="1.28600823045268" data-start="19216060382458.4">19216060382458.4</span><br />
<span class="counterworld" data-increment="0.0317532880531423" data-start="4629347058.7918">4629347058.7918</span>

<?php
$str = '<h1>Samsung Z4. smartphone com Tizen. pode estar perto de ser lançado em novo país<h1>';
$arr = str_split($str, 20);

?>

更新

我也修复了你的代码。我希望你打算产生上述行为。

Answer 2

您需要将item对象包装在闭包中，如下所示：

＆＃13;

var newvalue;
var counterworld = document.getElementsByClassName('counterworld');
for (var i = 0; i < counterworld.length; ++i) {
    var item = counterworld[i];
    var counterId = setInterval((function (item, i) { 
        return function () {
            item.innerHTML = i + '=>' + countUp(item.getAttribute('data-start'), item.getAttribute('data-increment')); 
        }; 
    })(item, i), 100);
}
function countUp(start, increment) {
    if (newvalue == null) {
        newvalue = parseFloat(start) + parseFloat(increment);
    }
    else {
        newvalue = newvalue + parseFloat(increment);
    }
    if (increment < 1) {
       return newvalue.toLocaleString(undefined, { maximumFractionDigits: 2 });
}
else {
    return newvalue.toLocaleString(undefined, { maximumFractionDigits: 0 });

    }
}

＆＃13;

<span class="counterworld" data-increment="1.5" data-start="100">100</span><br />
<span class="counterworld" data-increment="1.28600823045268" data-start="19216060382458.4">19216060382458.4</span><br />
<span class="counterworld" data-increment="0.0317532880531423" data-start="4629347058.7918">4629347058.7918</span>

＆＃13;

所有元素的Javascript setInterval（多个计数器）

2 个答案:

更新