PHP绑定数据库值后计数器小数递增，如何让它停在目标整数？

问题根源 #

1. 原JS代码直接将浮点数（count + inc）赋值给innerText，导致显示小数；
2. 浮点数精度误差可能导致count永远无法严格等于target，循环无法终止。

解决方案一：修改原有代码（保留分步递增逻辑） #

调整JS代码，对计数结果取整并优化终止条件：

// COUNTER
const counters = document.querySelectorAll('.counter');
const speed = 500; // 数值越小，速度越慢

counters.forEach(counter => {
  const updateCount = () => {
    const target = +counter.getAttribute('data-target');
    const count = +counter.innerText;

    const inc = target / speed;

    // 优化终止条件，避免浮点数精度问题
    if (count + inc < target) {
      // 对计算结果取整后显示
      counter.innerText = Math.floor(count + inc);
      setTimeout(updateCount, 1);
    } else {
      // 直接设置为目标值，确保准确停止
      counter.innerText = target;
    }
  };

  updateCount();
});

解决方案二：改用整数计数变量（更可靠，推荐） #

用整数变量跟踪计数，从根源避免浮点数问题：

// COUNTER
const counters = document.querySelectorAll('.counter');
const speed = 500; // 数值越小，速度越慢

counters.forEach(counter => {
  // 确保目标值为整数
  const target = parseInt(counter.getAttribute('data-target'), 10);
  // 初始化当前计数为0
  let currentCount = 0;

  // 计算步长：若目标值大于speed则取整除结果，否则步长为1（保证递增速度合理）
  const step = target > speed ? Math.floor(target / speed) : 1;

  const updateCount = () => {
    if (currentCount < target) {
      // 每次累加步长，且不超过目标值
      currentCount = Math.min(currentCount + step, target);
      counter.innerText = currentCount;
      setTimeout(updateCount, 1);
    } else {
      counter.innerText = target;
    }
  };

  updateCount();
});

PHP代码优化（可选） #

为避免数据库查询异常导致的错误值，增强代码健壮性：

<?php
$sql = "SELECT Books_Not_Returned FROM booksnotreturned";
$result = mysqli_query($con, $sql);

if ($result && mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_array($result);
    // 确保输出为整数，默认值为0
    $val = isset($row['Books_Not_Returned']) ? (int)$row['Books_Not_Returned'] : 0;
    echo $val;
} else {
    // 查询失败或无数据时输出0
    echo 0;
}
?>

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