Установить счет программы JavaScript на два десятичных знака

Question

Пожалуйста, смотрите этот код:

<script>
setInterval(function () {
    var counters = document.getElementsByClassName("count");

    for(var i = 0 ; i < counters.length ; i++) {
        counters[i].innerHTML = parseInt(counters[i].innerHTML) + parseInt(counters[i].dataset.increment);
    }
}, 1000);
</script>

Что он делает, это берет кусок HTML, как это:

<div class="count" data-increment="10">10</div>

И это будет считаться 10 каждую секунду. Как заставить работать следующий код:

<div class="count" data-increment="10.02">10.02</div>

По сути, я хочу, чтобы эта программа считала до двух десятичных знаков.

Answer 1

JSFIDDLE Вам нужно использовать parseFloat, чтобы скрыть строку с плавающей точкой. и toFixed на float для усечения дополнительного десятичного числа. Чтобы исправить возвращаемую строку, вам нужно снова использовать parseFloat, чтобы она стала добавлением с плавающей точкой, а не конкатенацией строк.

var counters = document.getElementsByClassName("count");
    
    setInterval(function () {
        for(var i = 0 ; i < counters.length ; i++) {
            
            counters[i].innerHTML = (parseFloat(parseFloat(counters[i].innerHTML).toFixed(2)) + parseFloat(parseFloat(counters[i].dataset.increment).toFixed(2))).toFixed(2);
        }
    }, 1000);

<div class="count" data-increment="10">10</div>

<div class="count" data-increment="10.02">10.02</div>

Answer 2

Использование parseFloat вместо parseInt, А также toFixed(2) для ограничения двух десятичных знаков.

setInterval(function() {
    var counters = document.getElementsByClassName("count");

    for (var i = 0; i < counters.length; i++) {
        counters[i].innerHTML = parseFloat(counters[i].innerHTML).toFixed(2) + parseFloat(counters[i].dataset.increment).toFixed(2);
    }
}, 1000);

Answer 3

Попробуйте добавить дополнение в String(), .innerHTML, .dataset в Number(), Number() в выражении () прикован к .toFixed(2); задавать counters[i].innerHTML результат, полученный в течение String((Number(/* innerHTML */) + Number(/* dataset *)).toFixed(2))

var interval = setInterval(function() {
  var counters = document.getElementsByClassName("count");

  for (var i = 0; i < counters.length; i++) {
    counters[i].innerHTML = String((Number(counters[i].innerHTML) 
                            + Number(counters[i].dataset.increment)).toFixed(2));

  }
}, 1000);

<div class="count" data-increment="10.02">10.02</div>