react写倒计时

目录

方式一：

方式二：

页面效果

---

倒计时有两种方式

方式一：

获取当前时间，然后进行一小时的倒计时

<script type="text/babel">
    let menuitems = 60 * 60
    function time() {
        let m = Math.floor(menuitems / 60)
        let s = Math.floor(menuitems % 60)
        let vdom = (<div className='time'>
            {`${m < 10 ? "0" + m : m}分${s < 10 ? "0" + s : s}秒`}
        </div>)
        ReactDOM.render(
            vdom,
            document.getElementById('root')
        )
        menuitems--
    }
    setInterval(time, 1000)
</script>

 {`${m < 10 ? "0" + m : m}分${s < 10 ? "0" + s : s}秒`}

这行代码就是为了如果倒计时分和秒小于10的情况下，让页面显示0几，而不是一个数，页面更加美观

方式二：

首先获取未来一小时的时间，再获取当前时间，用未来一小时的时间减去当前时间进行倒计时

<script type="text/babel">
    let menuitem = 60 * 60   //倒计时的秒数
    let data = new Date().getTime() + 60 * 60 * 1000   //未来时间
    function time() {
        let now = new Date().getTime()   //当前时间
        let value = data - now
        let m = Math.floor(value / 1000 / 60)
        let s = Math.floor(value / 1000 % 60)
        let vdom = (<div className='time'>
            {`${m < 10 ? '0' + m : m}分${s < 10 ? '0' + s : s}秒`}
        </div>)
        ReactDOM.render(
            vdom,
            document.getElementById('root')
        )
        menuitem--
    }
    setInterval(time, 100)
</script>

页面效果