Question

我有一定的数字，我使用计数器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));
            }
        });
    });
});

Jsfiddle预览

https://jsfiddle.net/y6zdmaeq/

我希望数字317249显示为317,249或317.249并从0开始计数。谢谢

Answer 1

我已根据您的要求编写了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>

Answer 2

与this answer和您的代码结合使用，只需在.text()

之前格式化代码

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

如何在由。（点）或，（逗号）分隔的数字上使用jquery函数作为千位分隔符

2 个答案: