我想在顶部的计数数字前添加一个固定的“ $”。当我尝试了任何东西时,它会打断计数器并说“ NaNo”,尽管我对编码一无所知,但我希望有人能告诉我要添加什么以及在代码块中的确切位置。我希望顶部的主要数字是货币,以匹配我添加的信息。之前,我添加了使它成为数字的函数,所以用逗号对数字进行格式化,也许还需要另一个函数?
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = number_format(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
function number_format(number) {
var num = number.toLocaleString('en-US', {
maximumFractionDigits: 0
})
return num;
}
var a = 0;
$(window).ready(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'swing',
step: function() {
$this.text(number_format(this.countNum));
},
complete: function() {
$this.text(number_format(this.countNum));
}
});
});
a = 1;
}
});
.counter-value {
font-size: 80px;
line-height: 2em;
text-align: center;
padding: 17px 0;
}
.counter-value:after {
content: attr(data-desc);
display: block;
text-transform: none;
font-size: 16px;
line-height: 1.2em;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
<div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is $104,300 —
this amount of money can only be expected to generate $4,172 in
sustainable annual retirement income">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security
payment is $1,409">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on $40,000 a year after stopping work, you will
need savings of about $1.18 million to support a 30-year
retirement">0</div>
</div>
<div style="border: 0px solid black">
</div>
答案 0 :(得分:1)
您只需在选择器之前将CSS的内容添加为“ $”到计数器值类即可。这会将$符号放在具有反值类别的每个元素之前:
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = number_format(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
function number_format(number) {
var num = number.toLocaleString('en-US', {
maximumFractionDigits: 0
})
return num;
}
var a = 0;
$(window).ready(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'swing',
step: function() {
$this.text(number_format(this.countNum));
},
complete: function() {
$this.text(number_format(this.countNum));
}
});
});
a = 1;
}
});
.counter-value {
font-size: 80px;
line-height: 2em;
text-align: center;
padding: 17px 0;
}
.counter-value:before {
content: "$";
}
.counter-value:after {
content: attr(data-desc);
display: block;
text-transform: none;
font-size: 16px;
line-height: 1.2em;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
<div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is $104,300 —
this amount of money can only be expected to generate $4,172 in
sustainable annual retirement income">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security
payment is $1,409">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on $40,000 a year after stopping work, you will
need savings of about $1.18 million to support a 30-year
retirement">0</div>
</div>
<div style="border: 0px solid black">
</div>