用动画计算数字

Question

我想用动画数出一个数字。我有一个HTML代码，我设置了数字和一个计算这个数字的函数。问题是我有一个数字95%后面有一个百分号字符。但是这个函数删除了这个字符。你有什么想法为什么？

var fired = 0; 
 
$(document).ready(function() { 
 
\t if(fired === 0) { 
 
\t \t $('.count').each(function() { 
 
\t \t \t $(this).prop('Counter',0).animate({ 
 
\t \t \t \t Counter: $(this).text() 
 
\t \t \t  \t }, { 
 
\t \t \t  \t duration: 3000, 
 
\t \t \t  \t easing: 'swing', 
 
\t \t \t  \t step: function (now) { 
 
\t \t \t  \t $(this).text(Math.ceil(now)); 
 
\t \t \t  \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t fired = 1; //Only do scroll function once 
 
\t } 
 
});

.count { 
 
    font-size: 50px; 
 
    margin-bottom: 10px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    padding-top: 15px; 
 
} 
 
#counter { 
 
    float: left; 
 
    display: block; 
 
    width: 28.71111111%; 
 
    text-align: center; 
 
    padding: 0 30px; 
 
} 
 
#counter h3 { 
 
    font-size: 1.2em; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter"> 
 
\t <h3> 
 
\t \t <span class="count customer-satisfaction">95%</span> 
 
\t \t Customer Satisfaction 
 
\t </h3> 
 
</div>

Answer 1

这是因为$(this).text(Math.ceil(now))插入的数目，如果你告诉函数的%添加到数字像这样前清除<span class="count">：$(this).text(Math.ceil(now) + '%');它会像你想要它。从评论

更新通过OP

原来的情况是，有多个<span class="count">其停止我原来的答复无法正常工作。通过添加

if ($(this).hasClass('customer-satisfaction')) { 
    $(this).text(Math.ceil(now) + '%'); 
} else { 
    $(this).text(Math.ceil(now)); 
} 

%只会被添加到正确的数字，而不是全部。

var fired = 0; 
 
$(document).ready(function() { 
 
\t if(fired === 0) { 
 
\t \t $('.count').each(function() { 
 
\t \t \t $(this).prop('Counter',0).animate({ 
 
\t \t \t \t Counter: $(this).text() 
 
\t \t \t  \t }, { 
 
\t \t \t  \t  duration: 3000, 
 
\t \t \t  \t easing: 'swing', 
 
\t \t \t  \t step: function (now) { 
 
\t \t \t  \t if ($(this).hasClass('customer-satisfaction')) { 
 
         $(this).text(Math.ceil(now) + '%'); 
 
        } else { 
 
         $(this).text(Math.ceil(now)); 
 
        } 
 
\t \t \t  \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t fired = 1; //Only do scroll function once 
 
\t } 
 
});

.count { 
 
    font-size: 50px; 
 
    margin-bottom: 10px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    padding-top: 15px; 
 
} 
 
#counter { 
 
    float: left; 
 
    display: block; 
 
    width: 28.71111111%; 
 
    text-align: center; 
 
    padding: 0 30px; 
 
} 
 
#counter h3 { 
 
    font-size: 1.2em; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter"> 
 
\t <h3> 
 
\t \t <span class="count customer-satisfaction">95%</span> 
 
\t \t Customer Satisfaction 
 
\t </h3> 
 
</div>

Answer 2

CSS解决方案：

如果你想通过CSS将它们添加到所有的罪名，你可以做这样的：

.count:after{content: '%'} 

如果你想要做到客户满意跨度，你可以这样做：

.customer-satisfaction:after{content: '%'}