用動畫計算數字

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: '%'}