通过获取两个日期之间的毫秒差来显示Moment.js的倒计时-ReactJS

问题描述

我正在构建一个页面，该页面具有一个特定的有效期限，该有效期限是根据该用户第一次打开该页面时允许的最大天数和页面数来计算的。

页面将使用两个值来计算直到页面到期的剩余时间：-

durationInDaysFromApi：打开页面所允许的最长时间。
timestampFromApi：用户首次打开页面的时间。

我正在尝试在代码中执行的步骤，以获取毫秒值并将其用于倒数计时器：-

将从api获取的时间戳的时区转换为“亚洲/科威特”。

var createdAt = moment.tz（timestampFromApi，“亚洲/科威特”）;

将x天数添加到timestampFromApi中：-

添加的变量= createdAt.clone（）。add（durationInDaysFromApi，“天”）;

获取两个日期之间的差值以计算剩余时间直到该用户的页面访问权限到期：-

const diffInMilliseconds = add.diff（createdAt）;

所以最终方程将如下所示（timeRemainedToExpireInMillisecondForTheCounter =已添加-createdAt）

如果我想做的话，这里是示例代码：-

  const timestampFromApi = "2020-08-29 04:39:14";
  const durationInDaysFromApi = 7;
  var createdAt = moment.tz(timestampFromApi,"Asia/Kuwait");
  var added = createdAt.clone().add(durationInDaysFromApi,"days");
      added = moment.tz(added,"Asia/Kuwait");
  const diffInMilliseconds = added.diff(createdAt);

CodeSandBox

我的代码存在问题，它总是返回等于7天的毫秒值，我该如何解决它使其返回两个日期之间的毫秒数以获取页面过期的剩余时间？

解决方法

您需要add的7 days，然后获取该时间，并将该datetime与您的current日期时间（科威特）进行比较，并得到difference milliseconds使用.diff函数，您将使用它返回到React计数器 plugin

之所以总是显示剩余7天，是因为您总是将天添加到timestampFromApi中，而不是与当前日期时间进行比较。

实时沙箱演示：

实时SO演示：（显示剩余毫秒）

const dateFromApi = "2020-08-29 16:37:58";
const createdAt = moment.tz(dateFromApi,"Asia/Kuwait");
const added = createdAt.clone().add(7,"days");
const now = moment.tz("Asia/Kuwait"); //now time kuwait
const duration = added.diff(now,"milliseconds"); //get diff in millinseconds
console.log(duration)

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>

您的代码完全正确。它连续显示7天，因为更改durationInDaysFromApi 值时计时器组件未更新。您只需在UseEffect值更改后使用componentDidMount或durationInDaysFromApi 来更新计时器组件。

javascript momentjs reactjs reactjs