將計數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

使用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 2

JSFIDDLE您需要使用parseFloat隱蔽字符串來浮動。 並固定在float上以截斷多余的小數。 toFixed返回字符串，您需要再次使用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 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>