javascript - 用于在 mm :ss format 中显示计时器的 Moment js

Question

我有一个必须以 MM:SS 格式显示的计时器。我的倒计时时间是:30 分钟、60 分钟和 90 分钟。在下面的实现中，30 分钟和 60 分钟会正确显示，但 90 分钟最初显示为 30 分钟，当 30 分钟过去时，它会显示 60 分钟。状态时间以秒为单位读取，因此选项为 1800、3600 和 5400 秒。这是实现:

const calculateSessionTimeAt = limit => Date.now() + (limit * 1000); where limit is the seconds
this.state = { timer: this.props.calculateSessionTimeAt - Date.now() };

<span className="number">
          { formatTimerValue(timerValue, 'mm:ss') }
</span>

其中格式定时器值

const formatTimerValue = (timer, format) => moment().startOf('hour').add(timer, 'milliseconds').format(format);

你能帮我解决我所缺少的吗？

Answer 1

不确定为什么需要 momentjs，如果你有计时器，你可以为当前日期加上计时器设置一个值，并每秒检查当前日期和该值之间的差异。

这是一个如何做到这一点的例子:

const { useState, useEffect } = React;
//format single digit to double so 0 becomes '00'
const pad = n => ('0' + n).slice(-2);
//format amount of milliseconds to mm:ss
const millisecondsToTimer = ms => {
  if (ms < 0) {
    return '0:00';
  }
  const minutes = Math.floor(ms / 60000);
  const seconds = pad(
    Math.floor((ms - minutes * 60000) / 1000)
  );
  return `${minutes}:${seconds}`;
};
function App() {
  const [end, setEnd] = useState();
  const [minutes, setMinutes] = useState(6);
  const [timer, setTimer] = useState();
  const start = () =>
    setEnd(Date.now() + minutes * 60000 + 100);
  useEffect(() => {
    if (!end) {
      return;
    }
    const t = setInterval(
      () => setTimer(millisecondsToTimer(end - Date.now())),
      1000
    );
    setTimer(millisecondsToTimer(end - Date.now()));
    return () => clearInterval(t);
  }, [end]);
  return (
    <div>
      <label>
        Minutes:
        <input
          type="number"
          value={minutes || ''}
          onChange={e => setMinutes(e.target.value)}
        />{' '}
      </label>
      <button onClick={start}>Start</button>
      <div>{timer}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>