如何对由分隔的数字使用jquery函数.(点）或，(逗号）作为千分隔符

How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

本文关键字：分隔符 逗号 函数 分隔 数字 jquery      更新时间：2023-09-26

我有一个特定的数字，我使用计数器jquery函数，以便在特定的时间段内，该数字将从0变为该数字。现在，问题是当我添加（逗号）或时。（点）到数字作为千分隔符，它不起作用。如何使用、（逗号）和使脚本工作。（点）分隔符，并使用、（逗号）和返回结果。（点）也？

html

<div class='number_container'>
    <span class='count'>317249</span>
</div>

css

.number_container {
    background: red;
    width: 100px;
    text-align: center;
    padding: 38px 0;
    border-radius: 50px;
    color: white;
    margin: 0 auto;
}
.count {
    font: 20px arial;
}

Js

$(document).ready(function() {
    $('.count').each(function() {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3500,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
});

Jsfidle预览

https://jsfiddle.net/y6zdmaeq/

我希望数字317249显示为317249或317.249，并从0开始向上计数。感谢

结合这个答案和您的代码，只需在.text() 之前格式化代码

https://jsfiddle.net/y6zdmaeq/2/

我已经为您的需求编码了html。请将其保存为html文件，然后在浏览器中打开。如果你喜欢，请投票。请注意，我已经包含了一个相同的外部插件。"编码快乐！！"

<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.bendewey.com/code/formatcurrency/jquery.formatCurrency-1.4.0.js"></script>
</head>
<script>
  $(document).ready(function() {
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 3500,
        easing: 'swing',
        step: function(now) {
          $("#hiddenInput").val(Math.ceil(now).toString());
          var formattedText = $(".currency").formatCurrency().val();
          //alert(formattedText);
          $(this).text(formattedText);
        }
      });
    });
  });
</script>
<style>
  .number_container {
    background: red;
    width: 100px;
    text-align: center;
    padding: 38px 0;
    border-radius: 50px;
    color: white;
    margin: 0 auto;
  }
  .count {
    font: 20px arial;
  }
</style>
<body>
  <div class='number_container'>
    <span class='count '>317249</span>
    <input type="hidden" class="currency" id="hiddenInput"></input>
  </div>
</body>
</html>

相关文章：