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以截断额外的小数。 toFixed return string你需要再次使用parseFloat，这样它就变成了float而不是字符串连接。

＆＃13;

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);

＆＃13;

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

＆＃13;

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>

{{1}}

将javascript程序计数到两位小数

3 个答案: