Добавьте запятые каждые 3 di git на jquery скрипт - PullRequest
Новая
       56

Добавьте запятые каждые 3 di git на jquery скрипт

0 голосов
/ 15 февраля 2020 
<div>
  <h2>    Total Steps:  <span id="steps" class="commas"></span></h2>
</div>

<script>

        var from_date       = new Date("2020-01-01 00:00:00") /1000;
        var now             = Date.now() / 1000;
        var year2020        = now - from_date;

        var speed = 100;


        // Random Meter
    $(document).ready(function () {
        go();
        setInterval(function () {
            go();
        }, speed);
    });
            var random_increment = Math.floor((Math.random() * 5) + 5);
    function go() {
        $("#steps").html(year2020.toFixed(0));
        year2020 += random_increment;
    }   

</script>

Это выводится как:

Всего шагов: 3943958 (увеличивается).

Теперь я хочу включить запятая на каждые 3 ди git, и я нашел код 

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

Итак, как я могу получить вывод, как

Всего шагов: 3,943,958 (увеличивается каждую секунду)

?

Спасибо,

1 Ответ

0 голосов
/ 15 февраля 2020

Если вам нужно использовать метод $.fn.digits, вызовите .digits() после установки .html элемента #steps: 

var from_date = new Date("2020-01-01 00:00:00") / 1000;
var now = Date.now() / 1000;
var year2020 = now - from_date;
var speed = 100;
var random_increment = Math.floor((Math.random() * 5) + 5);

function go() {
  $("#steps")
    .html(year2020.toFixed(0))
    .digits();
  year2020 += random_increment;
}

$.fn.digits = function() {
  return this.each(function() {
    $(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
  })
}

go();
setInterval(go, speed);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2> Total Steps: <span id="steps" class="commas"></span></h2>
</div>

Но было бы проще вызвать .replace непосредственно в строке year2020.toFixed: 

var from_date = new Date("2020-01-01 00:00:00") / 1000;
var now = Date.now() / 1000;
var year2020 = now - from_date;
var speed = 100;
var random_increment = Math.floor((Math.random() * 5) + 5);

function go() {
  const newStr = year2020
    .toFixed()
    .replace(/\d(?=(?:\d{3})+(?!\d))/g, "$&,");
  $("#steps").text(newStr);
  year2020 += random_increment;
}

go();
setInterval(go, speed);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2> Total Steps: <span id="steps" class="commas"></span></h2>
</div>

Обратите внимание, что:

  • Поскольку элемент #steps должен содержать только простой текст, .text является более подходящим чем .html
  • toFixed аргумент по умолчанию равен 0: нет необходимости явно передавать 0.
  • Нет необходимости в регулярном выражении для использования группы захвата - так как весь match - это всего лишь один ди git, вам не нужно его захватывать, вы можете использовать $& для замены на этот ди git
  • Повторяющиеся токены в регулярном выражении можно сделать менее повторяющимися с квантификатором - например, \d\d\d можно заменить на \d{3}, в духе того, что DRY
  • Функция go - это функция, которую вы хотите вызывать на каждом интервал, так что вы можете просто передать go в setInterval (нет необходимости переносить его в другую функцию)
...