我是jquery的新手，有一些基本的了解。
我正在尝试使用jOdometer.js https://github.com/jesucarr/jodometer。我可以很好地得到里程表，并且默认的setInterval方法使里程表打勾。
代码中有一部分
function advanceCounter() {
setNumbers(counter);
counter = counter + settings.increment; // increment the number
// if we reach the end clear the interval and use the ending number
if(settings.counterEnd != false && counter >= settings.counterEnd){
clearInterval(counterInterval);
setNumbers(settings.counterEnd);
}
}
// to move the colums from one number position to another
function setNumbers(counter){
digits = String(counter).split('.'); // check decimals
// if we where using decimals
if (decimalsArray.length > 0){
// for each decimal digit, update the old digit position to the new
for (i=0;i<decimalsArray.length;i++){
oldDigit = decimalsArray[i];
// the new numer could have not decimal part, but we need it anyway
if (digits[1]){
decimalsArray[i] = digits[1].charAt(i);
}
if (decimalsArray[i] == ''){
decimalsArray[i] = '0';
}
updatePosition($('.jodometer_decimal_'+i, scope), parseInt(decimalsArray[i]), parseInt(oldDigit));
}
}
integers = digits[0];
j=integers.length-1;
// for each integer digit, update the old digit position to the new
for (i=0;i<integersArray.length;i++){
oldDigit = integersArray[i];
integersArray[i] = integers.charAt(j);
if (integersArray[i] == ''){
integersArray[i] = '0';
}
//alert($(this));
updatePosition($('.jodometer_integer_'+i, scope), parseInt(integersArray[i]), parseInt(oldDigit));
j--;
}
}
// changes the column position from one number to another
function updatePosition(col, newDigit, oldDigit){
if(newDigit != oldDigit){
col.stop();
// if the number is 0 use the bottom 0 in the image, and change intantly to the top 0
if (newDigit == 0){
col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing).animate({top: zeroSet},1, 'linear');
}else{
// if the new number is lower than the old, we have to go to the bottom 0 and start from the top 0, with the apropiate speed, to don't note the jump
if (newDigit < oldDigit){
col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed*((10-oldDigit)/10), 'linear').animate({top: zeroSet},1, 'linear').animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed*oldDigit/10, settings.easing);
}else{
col.animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing);
}
}
}
}
更新里程表。我正在使用ajax获取新数据，我想更新里程表读数。如何从我的网页上拨打advanceCounter()或setNumbers()来更新里程表？
帮助。
这是一个实际插件的演示（来自作者本人）。 http://www.frontendmatters.com/demos/jodometer/
答案 0 :(得分：1)
看起来你可以在获得这样的新数据时设置它：
function updateTimer(newVal)
{
$(".myCounter").jOdometer({ counterStart: newVal, counterEnd:newVal, numbersImage: 'images/jodometer-numbers.png'});
}
我不确定你想要增量是什么，如果有的话，但这应该可以解决问题。
<击>
这是内置动画。
打开你的jquery.jodometer.js文件。 查看第100行（功能正下方＆＃39; advanceCounter（）＆＃39;）并添加：
$.fn.Advance = function(newVal)
{
setNumbers(newVal);
}
现在您可以通过执行以下操作来递增计数器：
$("#MyCounterDiv").Advance(150); //150 whatever new value you want.
我只用一个计数器进行测试。 aVC指出只有最后一个初始化的计数器才会受到影响。 以下是我如何解决这个问题的方法：
将 setNumbers 函数替换为：
function setNumbers(counter, elem){
digits = String(counter).split('.'); // check decimals
// if we where using decimals
if (decimalsArray.length > 0){
// for each decimal digit, update the old digit position to the new
for (i=0;i<decimalsArray.length;i++){
oldDigit = decimalsArray[i];
// the new numer could have not decimal part, but we need it anyway
if (digits[1]){
decimalsArray[i] = digits[1].charAt(i);
}
if (decimalsArray[i] == ''){
decimalsArray[i] = '0';
}
var theScope = (elem) ? elem : scope;
console.log(theScope);
updatePosition($('.jodometer_decimal_'+i, theScope), parseInt(decimalsArray[i]), parseInt(oldDigit));
}
}
integers = digits[0];
j=integers.length-1;
// for each integer digit, update the old digit position to the new
for (i=0;i<integersArray.length;i++){
oldDigit = integersArray[i];
integersArray[i] = integers.charAt(j);
if (integersArray[i] == ''){
integersArray[i] = '0';
}
var theScope = (elem) ? elem : scope;
console.log(theScope);
updatePosition($('.jodometer_integer_'+i, theScope), parseInt(integersArray[i]), parseInt(oldDigit));
j--;
}
}
我添加了另一个参数＆＃34; elem＆＃34;这将在我们之前添加的 Advance 函数中传递。只需要将 $。fn.Advance 功能更改为：
$.fn.Advance = function(newVal)
{
setNumbers(newVal, $(this));
}
最后，我发现由于某种原因，我需要从 updatePosition 函数中删除if语句。这个if语句指出你是否试图告诉它改变＆＃39;到相同的数字。它会因为检查错误的计数器设置而中断。如果它很重要，我们可以解决这个问题，但我只是决定将其评论出来：P
function updatePosition(col, newDigit, oldDigit){
//if(newDigit != oldDigit){
col.stop();
// if the number is 0 use the bottom 0 in the image, and change intantly to the top 0
if (newDigit == 0){
col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing).animate({top: zeroSet},1, 'linear');
}else{
// if the new number is lower than the old, we have to go to the bottom 0 and start from the top 0, with the apropiate speed, to don't note the jump
if (newDigit < oldDigit){
col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed*((10-oldDigit)/10), 'linear').animate({top: zeroSet},1, 'linear').animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed*oldDigit/10, settings.easing);
}else{
col.animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing);
}
}
//}
}
答案 1 :(得分：0)
删除旧计数器并将其替换为可以调用jodometer插件的新元素：
$.ajax({
success : function (serverResponse) {
//create a new element to add to the DOM
var $counter = $('<div id="counter" />');
//replace the old `#counter` element with the new one (which has nothing bound to it)
$('#counter').replaceWith($counter);
//now initialize the plugin on the new DOM element
$counter.jodometer({ ... });
}
});
要为内容更改设置动画，您可以执行以下操作：
$.ajax({
success : function (serverResponse) {
//create a new element to add to the DOM
var $counter = $('<div id="counter" style="display:none;" />');
//replace the old `#counter` element with the new one (which has nothing bound to it)
$('#counter').fadeOut(500).replaceWith($counter);
//now initialize the plugin on the new DOM element
$counter.fadeIn(500).jodometer({ ... });
}
});
请注意，在将新元素添加到DOM之前，我已将style="display:none;"添加到新元素中，这样您就可以fadeIn()元素。