Question

网店。大车。购物车中的产品：

name | price | count | pricecount  
Car  | 10usd |   2   |   20usd

计数为<input type='number' class='changecount'>，如果我更改它，我想采用输入的数字，然后乘以价格并更改pricecount的文本值。但我想这样做的效果如下：

price = 10; count = 2; pricecount = 20; ->> change count to 3 so pricecount = 30;
pricecount changes from 20 to 30 with effect showing 21,22,23..30 (like timer)

更改文字但没有效果

$('.changecount').blur(function(){
    var $price = $(this).parent().siblings('.gprice').text();
    var $value = $(this).val();
    var $pricecount = $price * $value;
    $(this).parent().siblings('.gpricecount').text($pricecount);
});

我怎样才能使用JQuery？

Answer 1

您可以创建一个定期更改号码的功能：

function IncreaseTotalPrice( item, lowVal, highVal) {
    //item is the DOM element that displays the price

    while(lowVal < highVal) {
        lowVal++;
        item.text(lowVal);
        sleep(100); //wait 0.1 sec before continuing the loop and changing the number again
    }
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

注意：我喜欢使用sleep()函数。 setTimeout()和setInterval()同样有效。

Answer 2

您可以采用的一种方法是利用setInterval对文字执行常规的预定+1操作。

这样的事情从一个数字变为30，通过每秒打1：

var interval = 1000,      // one second
    max = 30,
    textbox = $('#textbox'),
    schedule = setInterval(function () {

        var currentValue = textbox.val();

        // if we've already reached the max limit,
        // break schedule
        if (currentValue >= max) { 
            clearInterval(schedule);
        }

        // add 1
        textbox.val(currentValue + 1);                        

    }, interval);

代码非常脏，但你应该能够理解我的意思。关于setInterval的一个好处是它是非阻塞的，所以你的其他进程应该能够继续进行。

Answer 3

请参阅此DEMO并告诉我它是否解决了您的问题。更改左侧的价格并查看右侧输入的效果

var timer = null;
$("#price1").change(function(){
    if(!updating) updatePrice();
  });
});

    var updating = false;
    function updatePrice() {
      console.log("tick");
      var $price1 = $("#price1");
      var $price2 = $("#price2");
      var dif = +$price1.val() - +$price2.val();

      if(dif < 0) {
        $price2.val(+$price2.val()-1);
      }else if(dif > 0) {
        $price2.val(+$price2.val()+1);
      }

      if(dif !== 0){
        updating = true;
        setTimeout(updatePrice, 1000);
      }else {
        updating = false; 
      }

    }

已更新：已修复漏洞

Answer 4

Jquery.blur不是你的想法。它不会产生模糊效果，但会移除控件的焦点。淡入淡出可能是你的选择。

Answer 5

尝试使用JQuery Flip Counter插件：

http://www.jqueryrain.com/?LCnNoMur

http://keith-wood.name/flightBoard.html

JQuery动态更改数字

5 个答案: