JSON 值的动画计数并替换 null
Animate count number of JSON value and replacing null
是否可以实现json数据的动画计数js。我试过了,但是 return Nan。这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number"><span class="count">Count</span></div>
<div id="id">Id: </div>
<div id="pos">POS: </div>
<div> Static Number</div>
<div class="count">345678912</div>
<script type="text/javascript">
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
JS:
var info = {"city":[
{"id":"4","number":"376478","pos":"null"},
{"id":"5","number":"4565878","pos":"3"},]};
var res = info.city.filter(function(item){
return item.id=='4';
function CheckNullReturnBlank(item) {
return item = (item == null) ? 'No Data' : item;
}
});
console.log(res);
var HTML = '<span>'+res[0].number+'</span>';
$('.count').append(HTML);
var HTML ='<span>'+res[0].id+'</span>';
$('#id').append(HTML);
var HTML ='<span>'+res[0].pos+'</span>';
$('#pos').append(HTML);
但如果我使用静态数字进行测试,动画效果完美。另一件事是,我试图将空值从 json 替换为无可用数据,但没有成功。感谢您的帮助,我可以试试吗。
这是 JSfiddle link:http://jsfiddle.net/zeef/vLw5wo5p/3/
有一些问题:
- 你写
item == null
,而 "null" 是一个字符串。
- 您的项目是一个对象,您需要的是它的属性 (
item.pos == 'null'
)
- 你得到
NaN
因为在你的第一个 .count
跨度中你有 "Count" 字符串,它不是数字 :)
- 您的过滤函数永远不会到达
CheckNullReturnBlank
函数;
- 并且您将动画脚本放在 HTML 中,因此它会在您的其他 Javascript 之前加载,因此动态添加的内容不受 HTML 中脚本的影响。
var info = {"city":[
{"id":"4","number":"376478","pos":"null"},
{"id":"5","number":"4565878","pos":"3"},]};
var res = info.city.filter(function(item){
return item.id=='4';
});
res.forEach(function(item) {
item.pos = (item.pos == 'null') ? 'No Data' : item.pos;
});
console.log(res);
var HTML = '<span>'+res[0].number+'</span>';
$('.count').append(HTML);
var HTML ='<span>'+res[0].id+'</span>';
$('#id').append(HTML);
var HTML ='<span>'+res[0].pos+'</span>';
$('#pos').append(HTML);
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number">Count <span class="count"></span></div>
<div id="id">Id: </div>
<div id="pos">POS: </div>
<div> Static Number</div>
<div class="count">345678912</div>
是否可以实现json数据的动画计数js。我试过了,但是 return Nan。这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number"><span class="count">Count</span></div>
<div id="id">Id: </div>
<div id="pos">POS: </div>
<div> Static Number</div>
<div class="count">345678912</div>
<script type="text/javascript">
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
JS:
var info = {"city":[
{"id":"4","number":"376478","pos":"null"},
{"id":"5","number":"4565878","pos":"3"},]};
var res = info.city.filter(function(item){
return item.id=='4';
function CheckNullReturnBlank(item) {
return item = (item == null) ? 'No Data' : item;
}
});
console.log(res);
var HTML = '<span>'+res[0].number+'</span>';
$('.count').append(HTML);
var HTML ='<span>'+res[0].id+'</span>';
$('#id').append(HTML);
var HTML ='<span>'+res[0].pos+'</span>';
$('#pos').append(HTML);
但如果我使用静态数字进行测试,动画效果完美。另一件事是,我试图将空值从 json 替换为无可用数据,但没有成功。感谢您的帮助,我可以试试吗。
这是 JSfiddle link:http://jsfiddle.net/zeef/vLw5wo5p/3/
有一些问题:
- 你写
item == null
,而 "null" 是一个字符串。 - 您的项目是一个对象,您需要的是它的属性 (
item.pos == 'null'
) - 你得到
NaN
因为在你的第一个.count
跨度中你有 "Count" 字符串,它不是数字 :) - 您的过滤函数永远不会到达
CheckNullReturnBlank
函数; - 并且您将动画脚本放在 HTML 中,因此它会在您的其他 Javascript 之前加载,因此动态添加的内容不受 HTML 中脚本的影响。
var info = {"city":[
{"id":"4","number":"376478","pos":"null"},
{"id":"5","number":"4565878","pos":"3"},]};
var res = info.city.filter(function(item){
return item.id=='4';
});
res.forEach(function(item) {
item.pos = (item.pos == 'null') ? 'No Data' : item.pos;
});
console.log(res);
var HTML = '<span>'+res[0].number+'</span>';
$('.count').append(HTML);
var HTML ='<span>'+res[0].id+'</span>';
$('#id').append(HTML);
var HTML ='<span>'+res[0].pos+'</span>';
$('#pos').append(HTML);
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number">Count <span class="count"></span></div>
<div id="id">Id: </div>
<div id="pos">POS: </div>
<div> Static Number</div>
<div class="count">345678912</div>