Преобразовать временную метку Unix + добавить 1 час

Я работаю над обратным отсчетом для нескольких строк, используя карту 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, который я могу использовать?

stackoverflow.com/questions/847185/…?
user47589 23.03.2018 18:55

@Amy Спасибо, но я понятия не имею, как сделать обратный отсчет с +1 часом этого реального времени :(

Laura delgado 23.03.2018 19:14

Google "javascript добавить час до даты".

user47589 23.03.2018 19:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
3
12 234
1

Ответы 1

Я вижу, что вы пропускаете секунды для обратного отсчета, который в вашем коде проходит 3600 (1 час в секундах). Добавление 3600 к эпохе unix в реальном времени должно дать вам правильное время, которое вы хотите в секундах, которое вы можете передать, чтобы сгенерировать правильный час, с которого вы хотите начать обратный отсчет.

В вашем коде: this.state = { time: {}, seconds: 3600, unix: 1521827247 };

Пытаться: seconds: current_unix_time + 3600

Вот еще один источник: Javascript: как добавить n минут к отметке времени unix

Другие вопросы по теме