Question

我有一个奇怪的问题。在我的网络上，我向用户显示带有动画编号的outputed能源数据，并从我的api计算从零到数值。问题是，当我“硬编码”数字时，计数有效，但如果我尝试从API计算数字，它们就不算数了。以下是plunker以获得更好的解释。

//get zahtjev za analytics
function auto_load() {
  $.ajax({
    type: "GET",
    url: "https://testtest/live-stats",
    cache: false,
    success: function loadCounter(data) {
      $("#proizvedeno").text(data.total_energy_output.toFixed(2)); //here I set data to ID to show value in html
      $("#potroseno").text(data.total_energy_consumed.toFixed(2));
    }

  });
  
  /* here is how response from servers look
  
	total_energy_consumed:2619.8083750057
	total_energy_output:2625.9020281394
  
*/
}
$(document).ready(function() {

  auto_load(); //Call auto_load() function when DOM is Ready

});

//Refresh auto_load() function after 30000 milliseconds
setInterval(auto_load, 60000);




$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 6000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});



$(document).ready(function() {
  //Animated Progress
  $('.progress-bar').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    if (visible) {
      $(this).css('width', $(this).data('width') + '%');
      $(this).unbind('inview');
    }
  });

  //Animated Number
  $.fn.animateNumbers = function(stop, commas, duration, ease) {
    return this.each(function() {
      var $this = $(this);
      var start = parseInt($this.text().replace(/,/g, ""));
      commas = (commas === undefined) ? true : commas;
      $({
        value: start
      }).animate({
        value: stop
      }, {
        duration: duration == undefined ? 1000 : duration,
        easing: ease == undefined ? "swing" : ease,
        step: function() {
          $this.text(Math.floor(this.value));
          if (commas) {
            $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
          }
        },
        complete: function() {
          if (parseInt($this.text()) !== stop) {
            $this.text(stop);
            if (commas) {
              $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            }
          }
        }
      });
    });
  };

  $('.animated-number').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    var $this = $(this);
    if (visible) {
      $this.animateNumbers($this.data('digit'), false, $this.data('duration'));
      $this.unbind('inview');
    }
  });
});

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,700,100italic,300italic,400italic,700italic);

/*************************
*******Typography******
**************************/
body {
  padding-top: 100px;
  background: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #64686d;
  line-height: 26px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #272727;
}
#animated-number {
  padding: 100px 0 70px;
  background: #132125 url(../images/animated-number/bg.jpg) no-repeat 0 0;
  background-size: cover;
  color: #fff;
}
#animated-number h1,
#animated-number h2,
#animated-number h3,
#animated-number h4 {
  color: #fff;
}
#animated-number strong {
  display: block;
  margin-bottom: 30px;
}
.animated-number {
  display: inline-block;
  width: 140px;
  height: 140px;
  font-size: 24px;
  line-height: 140px;
  border: 3px solid #fff;
  border-radius: 100px;
  margin-bottom: 20px;
}
.section-header {
  margin-bottom: 50px;
}
.section-header .section-title {
  font-size: 44px;
  color: #272727;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 20px;
  margin: 10px 0 20px;
}
.section-header .section-title:before {
  content: "";
  position: absolute;
  width: 140px;
  bottom: 0;
  left: 50%;
  margin-left: -70px;
  height: 1px;
  background: #ebebeb;
}
.section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid #fff;
  border-radius: 20px;
  background: #C1C1C1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center">
  <div class="col-sm-3 col-xs-6">
    <div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
      <div class="animated-number"><span class="count">560506</span></div>
      <strong>Total energy output in kWh <p style="color: red">
      (this is examle with hard coded number)
      </p></strong>
    </div>
  </div>
  <div class="col-sm-3 col-xs-6">
    <div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
      <div id="potroseno" class="animated-number"><span class="count"></span></div>
      <strong>Total energy consumed in kWh</strong>
    </div>
  </div> 
</div>

JS Fiddle

Answer 1

问题是你在添加数字之前用JS加载整个页面，所以实际上JS正在工作并且计数但是只有0.解决方案是首先调用API然后调用你的JS。

Jquery从0开始计数到api

1 个答案: