Question

我已经实现了Chris Nanney的css / js翻转计数器，你可以在这里看到jsfiddle http://jsfiddle.net/H4PLA/1/。

我遇到的问题是我希望通过在下面的代码中设置ad hoc参数，我可以定义： - 起始价值， - 结束价值， - 增值， - 步伐，在我的html页面末尾使用此脚本：

var value = 0;
var endVal = 99;
var inc = 9;  //between 0 and 1000
var pace = 400; // between 400 and 2000
var nextCount;

var myCounter = new flipCounter('flip-counter', {
 value: value,
 auto: false
 });

  function doCount() {
 value = value + inc >= endVal ? value + inc : endVal;
 myCounter.setValue(value);
 nextCount = value != endVal ? setTimeout(doCount, pace) : null;
  }

  doCount();

但不知何故，最终结果（值= 99）会立即显示，0到99之间没有实时动态增量。有人知道为什么吗？感谢。

Answer 1

value = value + inc >= endVal ? value + inc:endVal;

这一行直接跳到最后，因为:的右侧将在value + inc >= endVal为假时触发。 value + inc不大于开头的endVal。

nextCount = value != endVal ? setTimeout(doCount, pace) : null;

这一行只是令人困惑，你甚至不使用下一个count变量，并且超时不会返回有用的值。为清楚起见如何：

if ( value != endVal ) setTimeout(doCount, pace)

Answer 2

您的比较不佳，请在>=中将<更改为doCount function。

Answer 3

如果value + inc比endVal低，那么行value = value + inc >= endVal ? value + inc : endVal;会将值设置为endVal，你真的想要吗？我相信你想要的是value = value + inc <= endVal ? value + inc : endVal;

Answer 4

var value = 1328;
var endVal = 2750;
var inc = 1; //Change
var pace = 600;
var nextCount;

var myCounter = new flipCounter('flip-counter', {
    value: value,
    auto: false
});

function doCount() {
    value = value + inc < endVal ? value + inc : endVal; // Change
    myCounter.setValue(value);
    nextCount = value != endVal ? setTimeout(doCount, pace) : null;
}

doCount();

css翻转计数器 - 无法设置适当的节奏

4 个答案: