格式字符串十进制和千位分隔符javascript

时间：2019-01-24 08:06:09

标签： javascript jquery html function animation

我用jQuery做了两个简单的计数器。现在，我尝试使这些计数器出现。

我的第一个计数器现在看起来像“ 23000”。但是为了获得更好的概述，我想添加一个点。我已经尝试过将“ 23.000”假装成十进制数字：最多可以用3位数字计数23，但是计数器以“ 0.000”开头，完成后不显示“ 000”。

第二：我的计数器看起来像“ 15.06”，我想用逗号来更改点，例如：“ 15,06”

有人可以帮我吗？

jQuery(document).ready(function () {

    function counter01() {
        $('#01').each(function () {
            var start = $(this).data("start")
            var speed = $(this).data("speed")
            $("#01").prop('end', start).animate({
                end: $(this).data("end")
            }, {
                duration: speed,
                step: function (now) {
                    $(this).text(Math.round(now * 1) / 1);
                }
            });
        });
    }
    
    counter01();

    function counter02() {
        $('#02').each(function () {
            var start = $(this).data("start")
            var speed = $(this).data("speed")
            $("#02").prop('end', start).animate({
                end: $(this).data("end")
            }, {
                duration: speed,
                step: function (now) {
                    $(this).text(Math.round(now * 100) / 100);
                }
            });
        });
    }
    
    counter02();
    
     function counter03() {
        $('#03').each(function () {
            var start = $(this).data("start")
            var speed = $(this).data("speed")
            $("#03").prop('end', start).animate({
                end: $(this).data("end")
            }, {
                duration: speed,
                step: function (now) {
                    $(this).text(Math.round(now * 1000) / 1000);
                }
            });
        });
    }
    
    counter03();
    
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
        <h3 id="01" class="zaehler" data-start="0" data-end="23000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23000</h3>
        <h3 id="03" class="zaehler" data-start="0" data-end="23.000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23.000</h3>
        <p>&nbsp;</p>
        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
        <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">23.000</h3>
        

    </div>
    
      <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
        <h3 id="02" class="zaehler" data-start="0" data-end="15.06" data-speed="2000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">15,06</h3>
        <p>&nbsp;</p>
        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
        <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">15,06</h3>

    </div>
    

</body>

1 个答案:

答案 0 :(得分：2)

这是经过修改的number_format()函数，可以直接为您进行转换：

function number_format(number, decimals, dec_point) {
  // Strip all characters but numerical ones.
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = '.',
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

您可以在这里看到它的工作：

function number_format(number, decimals, dec_point) {
  // Strip all characters but numerical ones.
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = '.',
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

jQuery(document).ready(function() {

  function counter01() {
    $('#01').each(function() {
      var start = $(this).data("start")
      var speed = $(this).data("speed")
      $("#01").prop('end', start).animate({
        end: $(this).data("end")
      }, {
        duration: speed,
        step: function(now) {
          $(this).text(number_format(Math.round(now * 1) / 1), 0, '', '.');
        }
      });
    });
  }

  counter01();

  function counter02() {
    $('#02').each(function() {
      var start = $(this).data("start")
      var speed = $(this).data("speed")
      $("#02").prop('end', start).animate({
        end: $(this).data("end")
      }, {
        duration: speed,
        step: function(now) {
          $(this).text(number_format(Math.round(now * 100) / 100, 2, ',', '.'));
        }
      });
    });
  }

  counter02();

  function counter03() {
    $('#03').each(function() {
      var start = $(this).data("start")
      var speed = $(this).data("speed")
      $("#03").prop('end', start).animate({
        end: $(this).data("end")
      }, {
        duration: speed,
        step: function(now) {
          $(this).text(Math.round(now * 1000) / 1000);
        }
      });
    });
  }

  counter03();


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
    <h3 id="01" class="zaehler" data-start="0" data-end="23000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23000</h3>
    <h3 id="03" class="zaehler" data-start="0" data-end="23.000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23.000</h3>
    <p>&nbsp;</p>
    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
    <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">23.000</h3>


  </div>

  <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
    <h3 id="02" class="zaehler" data-start="0" data-end="15.06" data-speed="2000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">15,06</h3>
    <p>&nbsp;</p>
    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
    <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">15,06</h3>

  </div>


</body>

相关问题
最新问题