javascript - 转换 Unix 时间戳 + 添加 1 小时

Question

我正在使用 map reactjs处理多行的倒计时

我对多行进行了 1 小时倒计时。它工作正常，但我不知道如何实时执行此操作，例如使用 new Date()

我有 Unix 日期，例如 1521827247 我如何转换它并添加 1 小时，这样我就可以倒计时

这是我的代码

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: {},
      seconds: 3600,
      unix: 1521827247
    };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
  }

  secondsToTime(secs) {
    let hours = Math.floor(secs / (60 * 60));
    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);
    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
    this.startTimer()
  }

  startTimer() {
    if (this.timer == 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  countDown() {
    // Remove one second, set state so a re-render happens.
    let seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds,
    });

    // Check if we're at zero.
    if (seconds == 0) {
      clearInterval(this.timer);
    }
  }

  render() {
    return (
      <div>
        car {this.props.data.car} <b>Finish:</b>h: {this.state.time.h}  m: {this.state.time.m} s: {this.state.time.s}
      </div>
        );
  }
}
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [{ "id": 1, "car": 'Audi 2018' }] };
  }

  addCar = () => {
    this.setState(prevState => ({
      data: [...prevState.data, { "id": 2, "car": 'New Car' }]
    }))
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.data.map(row => <MyComponent data={row} key={row.id} />)}
        </ul>
        <button onClick={this.addCar}>Add Car</button>
      </div>
    );
  }
}


ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

该怎么办或者有我可以使用的 npm 包吗？

Answer 1

我看到您正在倒计时，截至您的代码已超过 3600 秒(1 小时以秒为单位)。将 3600 添加到实时 unix 纪元应该会为您提供所需的正确时间(以秒为单位)，您可以将其传递以生成您想要开始倒计时的正确小时。

在您的代码中: this.state = {
time: {},
seconds: 3600,
unix: 1521827247
};

尝试: seconds: current_unix_time + 3600

这是另一个来源: Javascript: how to add n minutes to unix timestamp