如何使用 HTML 数据制作多个计数器

Question

我正在尝试创建类似的东西： http://pennystocks.la/internet-in-real-time/

我在这里： https://jsfiddle.net/t44qsb9d/

jQuery('document').ready(function() {
    var count = 0;
    var counter = document.querySelector('#foo');
    var countNum = parseInt(counter.dataset.counter,10);
    setInterval(function() {
        count += countNum;
        jQuery('#foo').html(count);
    }, 1000);    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="background-color:#359BED;color:#ffffff;font-size:30px;padding:40px;"><div style="padding-left:300px;"><div id="foo" data-counter="11">0</div><span style="color:#ffffff;line-height:40px;">Accounts created</span>
</div>
</div>

我需要更新这个脚本来更新多个计数器，因为目前它只能在一个计数器上工作。非常感谢任何帮助。

谢谢， 刘易斯

Answer 1

这是一个计数器对象，你可以创建任意数量的计数器：

function MyCounter(startNum, increase, interval, selector){
    this.counterValue = startNum;
    this.container = jQuery(selector);
    this.paused = false;
    this.increase = increase;
    this.interval = interval;
    return this;
}

MyCounter.prototype.start = function(){
    var self = this;
    self.counter = setInterval(function(){
        if(!self.paused){
            self.counterValue += self.increase;
            if(self.container && self.container.html){
                self.container.html(self.counterValue);
            }
        }
    }, self.interval);
}

MyCounter.prototype.pause = function(){
    this.paused = true;
}

MyCounter.prototype.resume = function(){
    this.paused = false;
}

MyCounter.prototype.stop = function(){
    clearInterval(this.counter);
}

使用它：

var fooCounter = new MyCounter(0, parseInt(counter.dataset.counter,10), 1000, '#foo')
fooCounter.start();

暂停和恢复：

fooCounter.pause();
fooCounter.resume();

停止它：

fooCounter.stop();

Answer 2

这是小提琴：https://jsfiddle.net/t44qsb9d/4/

现在解释一下：

HTML

<div style="background-color:#359BED;color:#ffffff;font-size:30px;padding:40px; class="rowT"">
    <div style="padding-left:300px;">
        <div class="foo" data-counter="11">0</div>
        <span style="color:#ffffff;line-height:40px;">Accounts created</span>
    </div>
</div>
<div style="background-color:red;color:#ffffff;font-size:30px;padding:40px; class="rowT"">
    <div style="padding-left:300px;">
        <div class="foo" data-counter="25">0</div>
        <span style="color:#ffffff;line-height:40px;">Videos Watched</span>
    </div>
</div>

我没有为“foo”使用 ID，而是将其更改为一个类，因为同一 ID 在单个 HTML 页面上只能引用一次。

JS

jQuery('document').ready(function() {

    $('.foo').each(function() {
        var thisDiv = $(this),
            count = 0;
        var countNum = parseInt($(this).data('counter'),10);
        setInterval(function() {
            count += countNum;
            thisDiv.html(count);
        }, 1000);
    });
});

我正在遍历所有具有 foo 类的计数器。然后我将该特定计数器存储到一个名为thisDiv 的变量中。其余代码与您已有的类似。

希望这会有所帮助。

更新

我已将 count 变量的声明移到循环中以限制其范围。