Question

这是我给出最终号码计数的脚本（见html）。我想要做的是添加一个千位分隔符。因为它是我的代码将计数从0到例如的数字。 100,000，但它会显示：“100000”，看起来不太好。

PS：我已经尝试过LocaleString（），但它在我的代码中没有用，或者我没有正确使用它。这个问题是它不会显示千位分隔符在动画计数的同时。

JS

<script>
            var a = 0;
            $(window).scroll(function() {

              var oTop = $('#counter').offset().top - window.innerHeight;
              if (a == 0 && $(window).scrollTop() > oTop) {
                $('.counter-value').each(function() {
                  var $this = $(this),
                    countTo = $this.attr('data-count');
                  $({
                    countNum: $this.text()
                  }).animate({
                      countNum: countTo
                    },

                    {

                      duration: 5000,
                      easing: 'swing',
                      step: function() {
                        $this.text(Math.floor(this.countNum));
                      },
                      complete: function() {
                        $this.text(this.countNum);
                        //alert('finished');
                      }

                    });
                });
                a = 1;
              }

            });
        </script>

HTML

<div class="counter-value" data-count="100000">0</div>

Answer 1

有时候答案就在我们眼前......

                  step: function() {
                    $this.text(Math.floor(this.countNum).toLocaleString());
                  },
                  complete: function() {
                    $this.text(Number(this.countNum).toLocaleString());;
                    //alert('finished');

我需要将所有功劳归功于@PatrickEvans。谢谢。

Answer 2

不使用div，而是使用对您有用的元素：

代码 <强>目的

<input type='range'>将当前偏移值： 0 存储到 100,000

<output></output>显示使用Intl.NumberFormat()
格式化的<input type='range'>的值
<form>在用户滚动时，收听 input event 和trigger()合成input事件。

在演示中评论的详细信息

演示

* { margin: 0; padding: 0 } html, body { overflow-x: hidden; font: 600 16px/1.5 Consolas; width: 100%; height: 100%; display: table; margin: 0 auto; } #countDown { position: relative; width: 96vw; height: 12600ch; overflow-x: hidden; overflow-y: scroll; margin-top: 50vh; z-index:-1; } /* The input is hidden because it cannot keep a text of numbers and commas if it's a type='range'. Don't want to have it as a type='text' because it's more work to validate */ #counter { display: none } #set { position: fixed; width: 15%; height: 96vh; z-index: 1; top: 2vh; text-align: center; } #counterView { display: block; margin-top: calc(50vh - 8px); }

<html> <head></head> <body> <form id='countDown'> <fieldset id='set'> <input id='counter' type='range' min='0' max='100000' value='100000'> <output id="counterView" for='counter'>100,000</output> </fieldset> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var a = 0; $(document).scroll(function() { /* label#0.mark is a fixed position at the top of viewport || The form#countDown is 12596ch high = window.innerHeight */ var oTop = $('#set').offset().top + window.innerHeight; // As the distance between top of viewport decrease... if ($(window).scrollTop() < (oTop)) { // The form fires an input event $('#countDown').trigger('input'); // The input records the distance $('#counter').val(100315 - Math.round(oTop)); } }); // The form is bound to input event $('#countDown').on('input', function(e) { // Create a special built-in Object var commas = new Intl.NumberFormat('us-US'); // Get the input's value and convert it into a number var c = Number($('#counter').val()); // The value of output = value of input var cV = Number($('#counterView').val()); // Display formatted value in output $('#counterView').val(commas.format(c)); }); </script> </body> </html>

JS计数与千位分隔符

2 个答案:

演示