0

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

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

count 是<input type='number' class='changecount'>，如果我改变它，我想取输入的数字，然后乘以 price 并更改 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 做到这一点？

4

5 回答 5

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()工作一样好。

于 2013-02-21T16:41:41.783 回答
1

您可以做到这一点的一种方法是利用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是它是非阻塞的，因此您的其他进程应该能够在此过程中继续进行。

于 2013-02-21T16:43:07.900 回答
1

查看这个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; 
      }

    }

更新：泄漏已修复

于 2013-02-21T16:44:41.407 回答
0

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

于 2013-02-21T16:34:49.697 回答
0

尝试 JQuery FlipCounter 插件，例如：

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

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

于 2013-02-21T16:49:09.533 回答