Question

我有一个变量，使用ajax轮询脚本并每隔10秒拉一下结果发布的数据 - 然后javascript更新div id，如下所示：

<script>
    function refresh_div() {
        jQuery.ajax({
            url: '<?php echo $example_url ?>',
            dataType: 'json',
            type:'POST',
            success:function(data) {
                jQuery("#example_data").html(data.example_data);

            }
        });
    }

    t = setInterval(refresh_div,10000);
</script>

  <p id="example_data"><?php echo $example_data ?></p>

我喜欢做的事情实际上是每次更新（每10秒）使用javascript动画从显示的最后一个数字计算到更新的帖子值。我现在能够获得最后10秒之前的值和作为post变量之后的值。我也可以使用下面的代码从另一个数字计算一个静态数字 - 但我不知道如何设置它以便post值触发下面的动画（从here获取，任何人都可以通过发布的变量帮助我每隔10秒计算一次吗？

<?php

echo '
<div class="counter" data-count='.$example_data.'>'.$example_data_less_10_seconds.'</div>
'
?>

<script>

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 20000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  

});

</script>

Answer 1

这里是jsfiddle demo

尝试使用此

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function refresh_div() {
    var prev_count = parseInt(jQuery("#example_data").text());
    jQuery.ajax({
        url: '<?php echo $example_url ?>',
        dataType: 'json',
        type:'POST',
        success:function(data) {
            var new_count = data.example_data;

            $({count: prev_count}).animate({count: new_count}, {
                duration: 600,
                easing: 'linear',
                progress: function() { 
                    $('#example_data').text(numberWithCommas(Math.ceil(this.count*100)/100));
                }
            });
        }
    });
}

t = setInterval(refresh_div,10000);

使用javascript post update更新animate计数变量

1 个答案: