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

您可以尝试使用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>

Answer 3

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

HTML5：启动计数器

3 个答案: