原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
第
React实现一个倒计时hook组件实战示例
本篇文章主要实现一个无样式的倒计时hook组件，通常不同地方的倒计时样式都不同，但倒计时的逻辑基本是都是一样的，因此可以抽离成一个工具方法或者一个hook组件，这样让倒计时逻辑可以进行通用，样式让业务方具体去实现。
思路
倒计时可能需要显示剩余时间的单位有：天、时、分、秒、毫秒，可能只需显示一个，也可能都需要显示。
注意细节：
只显示某一单位的时间或者需要显示的最大单元时间，需要可以大于正常时间最大限制，比如要剩余100小时58分时，小时需要可以大于23，分钟不能大于59。需要可以设置是否显示毫秒，1s等于1000ms，但人的反应时间是0.2s～0.3s，因此毫秒以百为单位显示，显示毫秒适用于秒杀类活动场景。
实现
先来定义好参数：
exportinterfaceCountDownOptions{
/**截止时间，时间戳*/
deadlineTime:number;
/**是否需要毫秒*/
showMillisecond:boolean;
参数只需要倒计时截止时间以及是否需要显示毫秒。
再定义一下需要获取的返回值：
exportinterfaceTimeInfo{
/**天*/
day:number;
/**小时*/
hours:number;
/**补零后的小时*/
hoursStr:string;
/**分钟*/
minutes:number;
/**补零后的分*/
minutesStr:string;
/**秒*/
seconds:number;
/**补零后的秒*/
secondsStr:string;
/**毫秒*/
milliseconds:number;
/**补零后的毫秒*/
millisecondsStr:string;
/**是否结束*/
end:boolean;
day、hours、minutes、seconds、milliseconds都是剩余的多少秒数，没有做限制，hoursStr、minutesStr、secondsStr、millisecondsStr才做限制，比如剩下1天10小时10分钟10秒100毫秒，那么显示结果如下：
{
day,
hours,
hoursStr,
minutes,
minutesStr,
seconds,
secondsStr,
end:false,
下面来看具体实现代码。
先实现一个简单的补零函数，JS字符串本身也有补零函数，也可以直接使用的，不过也需要转换类型。
//格式化数据，这里就是补零
functionformate(time:number):string{
return`${time100:}${time}`;
工具方法清除倒计时数据数据信息：
functionclearCountdownInfo(showMillisecond=false):TimeInfo{
consttimeInfo:TimeInfo={
day:0,
hours:0,
hoursStr:00,
minutes:0,
minutesStr:00,
seconds:0,
secondsStr:00,
end:true,
if(showMillisecond){
timeInfo.milliseconds=0;
timeInfo.millisecondsStr=0;
returntimeInfo;
关键工具方法计算倒计时返回的数据信息：
functioncomputeCountdownInfo(
remainTime:number,
showMillisecond=false
):TimeInfo{
//剩余时间小于说明结束，直接清空
if(remainTime0){
returnclearCountdownInfo(showMillisecond);
//这里用了一个比较笨的方法，一个个进行计算，后续可以优化试试看
constday=Math.floor(remainTime/(24
文档评论（0）