JS与React分别实现倒计时（天时分秒）

JS方法

html部分

        <div class="clock">
            <i></i>
            天
            <i></i>
            :
            <i></i>
            :
            <i></i>
            后截止统计
        </div>

 

css部分

.clock{
    width: 13.7rem;
    height: 1rem;
    margin-top:31.42rem;
    color: #666666;
    font-size: 0.85rem;
    line-height: 1rem;
}

.clock i{
        background: #ED0007;
        color: #FFF;
        font-weight: bold;
        width: 1.2rem;
        height: 1.04rem;
        line-height: 1.04rem;
        text-align: center;
        display: inline-block;
    }

　　

js部分

let clock = document.getElementsByClassName('clock');
    setInterval(function(){
        let nowtime = new Date();
        let endtime = new Date(2020,9,1,0,0,0); //设定的截止日期是10月1日，注意 Date方法中的月份提前一个月

        let num = endtime.getTime() - nowtime.getTime() //以number形式表示的时间戳之差

        // 以下是计算分时秒的过程
        let day = parseInt(num/(1000*60*60*24));
        num %= 1000*60*60*24;
        let hour = parseInt(num/(60*60*1000));
        num %= 1000*60*60;
        let minute = parseInt(num/(60*1000));
        num %= 60*1000;
        let second = parseInt(num/1000);

        clock[0].children[0].innerHTML = day;
        clock[0].children[1].innerHTML = hour;
        clock[0].children[2].innerHTML = minute;
        clock[0].children[3].innerHTML = second;
    },100)

 

React方法

最大不同就是对dom元素的内容展示，间接转为对state的控制。

import React from 'react';
import ReactDOM from 'react-dom';
import './Clock.less';

class Clock extends React.Component {
    constructor(props) {
        super(props); 
        console.log(props)
        this.state = {
            day: 0,
            hour: 0,
            min: 0,
            sec: 0,
            isShow:true,
        }   
    }

    componentDidMount () {
        this.countClock();
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }
    
    countClock = ()=> {
        this.timer = setInterval(() => {
            var nowtime = new Date();
            var endtime = new Date(2020,8,4,0,0,0); //设定的截止日期是10月1日
            var num = endtime.getTime() - nowtime.getTime() //以number形式表示的时间戳之差
            if(num<=0){
                clearInterval(this.timer);
                changeStatus();
                this.setState({
                    day: 0,
                    hours: 0,
                    min: 0,
                    sec: 0,
                    isShow:false,
                });
            }else{
                var day = parseInt(num/(1000*60*60*24));
                num %= 1000*60*60*24;
                var hour = parseInt(num/(60*60*1000));
                num %= 1000*60*60;
                var minute = parseInt(num/(60*1000));
                num %= 60*1000;
                var second = parseInt(num/1000);
                this.setState({
                    day:day,
                    hour:hour,
                    min:minute,
                    sec:second,
                    isShow:true,
                })
            }
        },100)   
    }

    
  render() {
    const { day,hour,min,sec } = this.state;
    return (
        <div> 
            <i>{day}</i>
            天
            <i>{hour}</i>
            :
            <i>{min}</i>
            :
            <i>{sec}</i>
            后截止统计
        </div>
    );
  }
}

export default Clock;

 可能方法还是比较愚钝的，希望可以给出更好的答案！