时间戳

首页 > 解决方案 > 使用 Material UI ProgressBar 反应倒计时

javascript - 使用 Material UI ProgressBar 反应倒计时

问题描述

我正在尝试实现一个功能，当用户按下锁定按钮时，项目的isReserved状态变为真。完成后，将在 Firebase Firestore 中创建另外两个状态startDate& expiryDate。距离expiryDate72 小时startDate，应该映射到进度条。一旦进度值减少到 0，项目的isReserved状态就会在 firestore 中恢复为 false。

firestore 文档有以下数据

reserveDB.doc(item.productID).set({
        productID: item.productID,
        image: item.image,
        price: item.price,
        productName: item.productName,
        isReserved: true,
        startDate: Date.now(), // time saved as timestamp
        expiryDate: event.setHours(72), // time saved as timestamp
      });

我正在尝试在 YouTube 上找到的各种示例，但其中大多数都以天、小时、分钟和秒的格式实现倒计时。我也尝试过，但我的只显示剩余的天数和小时数。您可以在此链接查看我的其余尝试：https ://stackblitz.com/edit/react-njnjwf?file=src/App.js

标签： javascriptreactjs

解决方案

在你的setHours函数中，获取当前日期的小时数，然后加上 72。

  const newStartDate = new Date();

  const getExpiryDate = (date, hours) => {
    const expirationDate = new Date(date);
    expirationDate.setHours(expirationDate.getHours() + hours);
    return expirationDate;
  };

  reserveDB.doc(item.productID).set({
    productID: item.productID,
    image: item.image,
    price: item.price,
    productName: item.productName,
    isReserved: true,
    startDate: newStartDate,
    expiryDate: getExpiryDate(newStartDate, 72),
  });

推荐阅读