javascript - HTML5 : Start counter

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>