-2
我对我有一个奇怪的问题。 在我的网页上，我向用户outputed展示了带有动画数字的能量数据，并从我的api中计数从零到数值。问题是，当我“硬编码”的数字，计数的作品，但如果我尝试从API计数，他们不算。这里是plunker为更好的解释。从0到jpi值从api值到
//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
\t total_energy_consumed:2619.8083750057
\t 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>
这是很多您希望我们为您调试的非现场代码。问题具体在哪里？你在哪里设置一个不起作用的值？在调试时，该运行时值是什么？ – David
在此处发布您的代码，而不仅仅是在远程站点。您可以使用[Stack Snippets]（https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）使其可执行。 – Barmar
@David我显示了什么不工作，并展示了它如何工作，以及如何不工作的例子？如果我知道答案，我甚至不会在这里问。对不起，我的英语不是母语，所以这是你理解的问题，这就是为什么你给我负面的观点。谢谢 – Arter