如何用JavaScript实现动画计数器？解决无法精确显示4.9的问题

你原来的代码用了++upto，这是每次往上加1，所以数值只能是1.5→2.5→3.5→4.5→5.5，根本碰不到4.9。等判断条件触发的时候，已经跳到5.5了，自然永远显示不了4.9。

核心就是把每次递增的量改成小数（比如0.1），同时注意JavaScript浮点数的精度坑，别算着算着出现0.30000000000000004这种奇怪的数。

靠谱的写法（用整数避免精度问题） #

let counts = setInterval(updated, 500);
// 用整数存，15对应1.5，49对应4.9，彻底避开浮点数精度问题
let upto = 15;
const target = 49;

function updated() {
    const count = document.getElementById("counter");
    upto++; // 每次加1，对应小数层面加0.1
    const currentValue = upto / 10;
    count.innerHTML = currentValue.toFixed(1); // 统一显示为一位小数
    if (upto >= target) {
        clearInterval(counts);
        count.innerHTML = "4.9"; // 最后强制显示目标值，确保精准
    }
}

简单写法（直接操作浮点数，需处理精度） #

嫌整数中转麻烦的话，也可以直接加0.1，但每次都要把数值修正成一位小数，避免精度误差干扰判断和显示：

let counts = setInterval(updated, 500);
let upto = 1.5;
const target = 4.9;

function updated() {
    const count = document.getElementById("counter");
    upto += 0.1;
    // 先转成一位小数的数值，消除浮点数精度带来的异常
    const currentValue = Number(upto.toFixed(1));
    count.innerHTML = currentValue;
    if (currentValue >= target) {
        clearInterval(counts);
        count.innerHTML = target;
    }
}

内容的提问来源于stack exchange，提问作者userZolika