时间戳

首页 > 解决方案 > React App - 为什么当小时数为零时 m 倒计时显示一个点？而我的分钟不是 00 时通过 59

javascript - React App - 为什么当小时数为零时 m 倒计时显示一个点？而我的分钟不是 00 时通过 59

问题描述

会议记录的问题是这样的。

小时点的问题是： 在此处输入图像描述

const [time, setTime] = useState(60 * 60)
const hour = time / 3600
let minutes = Math.floor(time / 60)
const seconds = time % 60;

const [hourLeft, hourRight] = String(hour).padStart(2, 0).split('')
const [minuteLeft, minuteRight] = String(minutes).padStart(2, 0).split('')
const [secondLeft, secondRight] = String(seconds).padStart(2, 0).split('')

useEffect(() => {
    if(time > 0){
        const timer = setTimeout(() => {
            setTime(time - 1)
        }, 1000)
    }
}, [time])

标签： javascriptreactjs

解决方案

像这样将数字分成左右部分确实是一种奇怪的方法。您的代码包含很多错误。

首先，你有

hour = time / 3600

您没有四舍五入，因此hour始终是 0 和 1 之间的小数。因此，如果您有 0.972222，那么您将分解该数字的数字，就好像它们是字符串一样，所以前两个将分别是0和..

你需要做的是得到floor这个数字。那么之后的所有其他计算也是不正确的。这就是你应该这样做的方式：

const hour = Math.floor(time / 3600);
const minutes = Math.floor(time % 3600 / 60);
const seconds = Math.floor(time % 60);

然后忘记你疯狂的数字，就像字符串一样，用零填充它们。您实际上可以一步完成所有操作：

const hour = String(Math.floor(time / 3600)).padStart(2, 0);
const minutes = String(Math.floor(time % 3600 / 60)).padStart(2, 0);
const seconds = String(Math.floor(time % 60)).padStart(2, 0);

然后只显示这些值：

return (
  <>
    {hour}:{minutes}:{seconds}
  </>
);

或者，如果您想将它们分解为单个字符以显示背景颜色，您可以这样做：

const timeStr = hour + ':' + minutes + ':' + seconds;

return (
  <>
  {timeStr.split('').map((char, index) => {
    return <span key={index}>{char}</span>
  })}
  </>
);

推荐阅读