jquery数字计数器结合字符串

问题描述：

我得到这些数字工作，但字母“T”已被替换，以便它不会显示。你们有没有关于如何让它工作的想法。非常感谢你。jquery数字计数器结合字符串

function commaSeparateNumber(val){ 
 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
 
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
 
    } 
 
    return val; 
 
} 
 

 
$('.number').each(function() { 
 
    $(this).prop('Counter',0).animate({ 
 
     Counter: $(this).text() 
 
    }, { 
 
     duration: 8000, 
 
     easing: 'swing', 
 
     step: function (now) { 
 
      $(this).text(commaSeparateNumber(Math.ceil(now))); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
<div class="count"><div class="number">30</div></div> 
 
<div class="text">text 1</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div class="number">3000</div></div> 
 
<div class="text">text 2</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div class="number">700<span>T</span></div></div> 
 
<div class="text">text 3</div>

你尝试过移动与div.number的“T”之外的跨度？ – happymacarts

我已经尝试过，但我想跨度内div.number – Tony

目前还不清楚你在问什么。这是其他问题的延续吗？ –

答

与您的代码的问题是它是替换整个DOM结构包括含有“T”所以DOM结构已经更新跨度。这里是你更新的代码

function commaSeparateNumber(val){ 
 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
 
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
 
    } 
 
    return val; 
 
} 
 

 
$('.number').each(function() { 
 
    $(this).prop('Counter',0).animate({ 
 
     Counter: $(this).text() 
 
    }, { 
 
     duration: 8000, 
 
     easing: 'swing', 
 
     step: function (now) { 
 
      $(this).text(commaSeparateNumber(Math.ceil(now))); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
<div class="count"><div><span class="number">30</div></div> 
 
<div class="text">text 1</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div><span class="number">3000</span></div></div> 
 
<div class="text">text 2</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div><span class="number">700</span><span>T</span></div></div> 
 
<div class="text">text 3</div>

好的。谢谢。顺便说一句，如何在700T和'''8,000 - > 8 000'''之间加一个空格？。我曾尝试用''' '''替代$ 1之外的“，”，但它不起作用。 – Tony

您可以使用CSS边距调整“空间”.t {margin：left：10px; } .count { text-align：right; width：100px; }或简单地在 t之前添加一个空格字符 – happymacarts

jquery数字计数器结合字符串

相关推荐