如何解决如何从特定日期开始倒数计时器
在ReactJS中,我需要从“ 09/19/2020”开始倒数计时器,并将其全部显示在我的页面上 该计时器认为的月,日,小时等 对于此计时器,它可以计算某个时间点的月份,天数,小时数等。不是在任何日期之前,而是在某个日期之前。从“ 09/19/2020”开始可用
我的代码:
import React from "react";
const Timer = () => {
}
export default Timer
解决方法
您可以将过去的日期时间转换为unix时间,并从当前的日期时间中减去unix时间,然后将时差转换回所需的任何时间。每秒执行一次以获得计时器。
您还可以使用moment.js
之类的库,该库具有.unix()
函数,可轻松进行转换。
尝试使用此示例:
import React,{ useState,useEffect } from "react";
function calcDiffInMinutes(dateA,dateB) {
return Math.floor(((dateA.getTime() - dateB.getTime()) / 1000) % 60); // TODO CALCULATIONS HERE
}
export default ({ dateFrom }) => {
const [currentDate,setCurrentDate] = useState(new Date());
const [minutesDiff,setMinutesDiff] = useState(
calcDiffInMinutes(currentDate,dateFrom)
);
useEffect(() => {
const timeoutId = setTimeout(() => {
setCurrentDate(new Date());
},1000);
return () => clearTimeout(timeoutId);
},[currentDate]);
useEffect(() => {
setMinutesDiff(calcDiffInMinutes(currentDate,dateFrom));
},[currentDate,dateFrom]);
return (
<div>
<div>Date From: {dateFrom.toISOString()}</div>
<div>CountDown value: {minutesDiff}</div>
</div>
);
};
将其放在一个单独的组件文件中,例如CountdownTimer
。
然后您可以在应用程序中使用它。
在此处查看完整示例: https://codesandbox.io/s/react-playground-forked-vmqvy?file=/CountdownTimer.js
P.S。 calcDiffInMinutes
应该由您完成,以分钟为单位计算实际差异。您还需要为日/月等创建此类函数。或者更改为单个函数,以返回具有所有差异的对象。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。