Question

我有一个包含开始日期和结束日期的计数器。基本上，在开始日期之后经过的每一秒，它都会以每秒41.70美元的价格计算。这无限期地持续下去。

我已经构建了这个功能。我正在努力的唯一部分就是我希望它从美分开始算起来像一个自动收报机。（例如1,200.98 - ＆gt; 1,200.99 - ＆gt; 1,201.00等）

以下是我想要改编的Count Up功能的示例。虽然我不像他们在例子中那样使用“数据计数”属性。

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 8000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  
  
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter" data-count="2200">0</div>

这是我的代码：

window.onload = function() {
	startDate("May 01, 2017 00:00:00 EST");
};

function startDate(x) {
	rightNow = new Date();
	x = new Date(x);
	difference = rightNow - x;
	amtPerSecond = (41.70 * (difference / 1000)).formatMoney(2);
	$("#perSecond").text("$ " + amtPerSecond);
	clearTimeout(startDate.to);
	startDate.to = setTimeout(function() {
		startDate(x);
	}, 1000);
}


// Plug-in to combact safari's incompatibility with .toLocaleString() 
Number.prototype.formatMoney = function(c, d, t) {
	var n = this,
		c = isNaN((c = Math.abs(c))) ? 2 : c,
		d = d == undefined ? "." : d,
		t = t == undefined ? "," : t,
		s = n < 0 ? "-" : "",
		i = String(parseInt((n = Math.abs(Number(n) || 0).toFixed(c)))),
		j = (j = i.length) > 3 ? j % 3 : 0;
	return (
		s +
		(j ? i.substr(0, j) + t : "") +
		i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) +
		(c ? d + Math.abs(n - i).toFixed(c).slice(2) : "")
	);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="perSecond"></div>

任何有助于解决的问题都将受到赞赏。

Answer 1

我能够从你的例子中得到一个滚动计数器。关键是将金额和期望值的当前值传递给animateCount函数。然后在此函数中，在animate元素上调用perSecond之前，首先给它一个自定义属性，我将其称为counter，并将其值设置为当前金额值。然后在animate函数中，您告诉它在定义的持续时间内将此属性更新为预期的下一个值。

在提供动画的持续时间和类型后，您可以定义step功能（如您提供的示例中所示）。这是为动画的每一步调用的，因此非常适合以滚动方式更新文本。在此函数中，您可以设置元素的文本值，该值只是使用formatMoney函数格式化的计数器属性。

现在，您需要做的就是每次调用startDate时调用此动画函数。请注意，您不直接在此处设置perSecond的文本值，animate函数会处理它。此外，动画的持续时间和超时的长度应该是相同的值，以使其具有无缝计数器。

我已经向jsfiddle添加了一个工作代码，请看一下：

<强> jsFiddle

使用Date（）使用Javascript计算资金

1 个答案: