react倒计时插件react-countdown

Posted 2023-04-17

参考技术A 最近做next.js项目，项目中有个倒计时的需求，于是上github上找了找发现了一个挺好的插件react-countdown推荐给大家，github地址： https://github.com/ndresx/react-countdown

npm install react-countdown --save

yarn add react-countdown

import Countdown from 'react-countdown';

<Countdown date=Date.now() + 10000 />

这是一个倒计时为10秒的示例，以毫秒为单位显示总时间差。

如果不对显示做处理默认在页面中的显示是：00:00:00:00对应->天、小时、分、秒

插件提供了两个属性：

1、daysInHours

Boolean类型的值默认为false；设为true时，它可以将天数转化为小时表示

2、zeroPadTime

Number类型的值，设置时间显示几位数，不够的用0填充，不设置这个属性的话当小时或者秒为一位数时展示一位数

另外react-countdown还给我们提供了一个renderer属性，它接收一个方法，如果我们有特殊需求如倒计时完成后要显示什么内容可以通过renderer接收的方法中实现。

在项目倒计时中一般会进行时间差值来计算剩余时间，我在项目中进行差值计算时遇到一个bug，在chrome中倒计时正常显示但在safari中倒计时没有显示，查了资料发现safari浏览器在时间处理上有一些兼容性问题。后端返回的时间格式是:2020-3-14 00:00:00,用new Date()转化后结果是Invalid Date，再getTime()得到的是NaN。原来safari不支持这种格式，把时间格式中的"-"全部替换为"/"就可以获取到时间戳了。

react-countdown插件中还提供了很多属性，有兴趣的可以上github上自行查阅。

js（react）60s 验证码倒计时方法

60s 验证码倒计时方法

    //60s倒计时
    const handleCountDown = (seconds = 60) => {
        // let second = 60;
        let second = seconds;
        const countDown = ()=> {
            // timer && clearTimeout(timer); //清除计时器
            if( second > 0){
                // let second =
                // countDownSecond--;
                // let a  = countDownSecond - 1;
                second--;
                setCountDownSecond( second );
            }
            if( second === 0 ){
                /*
                    _this.countDown = 60;//恢复60s设定
                    _this.isVerify = false;//不显示60s计时器
                    clearTimeout(count60Timeout)//清除计时器
                    return //结束方法的调用
                */
                second = 60;
                setCountDownSecond( second );
                // clearTimeout( timer ); //清除计时器
                return;
            }
            // let timer = setTimeout( countDown,1000 );
            setTimeout( countDown,1000 );
        };
        setTimeout( countDown,1000 );
    };

 

调用  handleCountDown(60) 此方法即可实现60s 倒计时