HTML5:启动计数器

Question

我正在使用一个模板，其中有计数器css类，顾名思义，它以增量效果计数到给定的数字。

这是代码，

<div class="counter"><span id="emi" data-from="100" data-to="12835" data-refresh-interval="50" data-speed="5000">12835</span></div>

所以当我加载页面时这有效。它从 100 计数到 12835，具有反作用。但是我需要更改该值，12835并重新启动计数器。

无论如何，我可以重新启动这种效果。默认情况下，它在页面加载时无需任何方法即可工作。

所以我的另一个问题是页面加载如何调用该计数器？[这可能会给我一个线索，我应该在哪里看]

http://themes.semicolonweb.com/html/canvas/counters.php

我的代码：

// assume
var emi = 10000;
$("#emi").hide();
$("#emi").html(emi);
$("#emi").removeAttr("class");

$("#emi").parent().attr("class", "counter");
$("#emi").attr("data-from", "100");
$("#emi").attr("data-to", emi);
$("#emi").attr("data-refresh-interval", "50");
$("#emi").attr("data-speed", "5000");
$("#emi").show();

如果我删除它$("#emi").html(emi);它不更新 html 中的任何内容，#emi 中仍然有一个以前的值.所以努力。

Answer 1

我不认为插件可以让您重新启动自己，因此您需要入侵它。但这是一个自制的演示，您可以根据自己的需要进行尝试和改进。无论如何，它应该有助于了解如何制作插件

function Counter(selector) {
  var self = this;
  //get all props from element
  this.elem = document.querySelector(selector);
  this.from = parseInt(this.elem.getAttribute('data-from') || 100);
  this.to = parseInt(this.elem.getAttribute('data-to') || 1000);
  this.refreshInterval = parseInt(this.elem.getAttribute('data-refresh-interval') || 50);
  this.speed = parseInt(this.elem.getAttribute('data-speed') || 5000);
  
  //start counter
  //if restart(int) is provided
  //restart counter after finishing with timeout
  this.start = function(restart) {
    //base logic, can be improved
    var diff = self.to - self.from;
    var steps = self.speed / self.refreshInterval;
    var step = diff / steps;
    var i = 1;
    var interval = setInterval(function() {
      var change = step * i;
      if (change <= self.to) {
        self.elem.textContent = Math.round(change);
        i++;
      } else {
        self.elem.textContent = Math.round(self.to)
        clearInterval(interval);
        //try to restart counter
        if(restart && restart > 0){
          setTimeout(function(){
            self.start(restart);
          }, restart);
        }
      }
    }, self.refreshInterval);
  }
}
//example1
var counter = new Counter('#emi');
//restart after 2000ms
counter.start(2000);
//example2
var counter2 = new Counter('#emi2');
//dont restart
counter2.start(0);

<span id="emi" data-from="100" data-to="12835" data-refresh-interval="50" data-speed="1000"></span>
<span id="emi2" data-from="100" data-to="1000" data-refresh-interval="100" data-speed="1000"></span>

Answer 2

大多数计数器的工作方式是，它们在页面加载时开始，并在达到给定数字时停止，在本例中为 12835。您能否指定您要用无休止运行的计数器实现的目标？http://themes.semicolonweb.com/html/canvas/counters.php 上的所有计数器都有一个指定的终点，直到它是一个倒计时计数器，但它们也有一个终点。
如果你能在CSS中提供class="counter"的规范，它可能有助于找出解决问题的方法。但同样，实现此类功能的最初原因是什么？
如果你想让你的网站访问者注意到这一点，那么也许你可以让计数器运行得更慢或扩大初始数字。
您提供的代码不是 MVP。

Answer 3

你可以

尝试使用jQuery .animate()，.data()，.promise()

注意，不确定data-refresh-interval="50"的预期影响？

$.fx.interval = 0;
var el = $("#emi");
function counter(elem) {
return $({
  from: elem.data().from
}).animate({
  from: elem.data().to
}, {
  easing:"linear",
  duration: elem.data().speed,
  step: function(now, fx) {    
    elem
    .text(Math.floor(now))
  }
}).promise().then(function() {
  return elem
})
  
}
counter(el).then(function(_elem) {
  // `_elem` : `this`
  // restart `counter` with new options set at `elem` : `_elem` : `this`
  counter(this.data({from:100, to:10000, refreshInterval:100, speed:5000}));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="counter"><span id="emi" data-from="100" data-to="12835" data-refresh-interval="50" data-speed="5000"></span>
</div>