js日期倒计时组件

最新推荐文章于 2025-06-08 10:50:56 发布

也简@

最新推荐文章于 2025-06-08 10:50:56 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_68266041/article/details/125225208

这是一个使用React编写的倒计时组件示例。组件通过useState和useEffect钩子管理状态，计算并显示从当前时间到指定日期（2022年6月11日下午5点11分）的剩余时间。当倒计时结束时，会触发警告提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { useEffect, useState } from 'react'
import './index.scss'

export default function Countdown() {

    const [days, setDays] = useState('00')
    const [hours, setHours] = useState('00')
    const [minutes, setMinutes] = useState('00')
    const [seconds, setSeconds] = useState('00')

    useEffect(() => {
        CountDownTimer('06/11/2022 5:11 PM');
    }, [])

    function CountDownTimer(dt) {
        var end = new Date(dt);
        console.log(end);//如果是Sat Jun 11 2022 17:11:00 GMT+0800 (中国标准时间)这种格式则不需要var end = new Date(dt);这一步了
        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {
                clearInterval(timer);
                alert('你这时间已经过了')
                return;
            }
            var days = (Math.floor(distance / _day)<10 ? '0'+ Math.floor(distance / _day) : Math.floor(distance / _day));
            var hours = (Math.floor((distance % _day) / _hour)<10 ? '0'+ Math.floor((distance % _day) / _hour) : Math.floor((distance % _day) / _hour));
            var minutes = (Math.floor((distance % _hour) / _minute)<10 ? '0'+ Math.floor((distance % _hour) / _minute) : Math.floor((distance % _hour) / _minute));
            var seconds = (Math.floor((distance % _minute) / _second)<10 ? '0'+ Math.floor((distance % _minute) / _second) : Math.floor((distance % _minute) / _second));

            setSeconds(seconds)
            setDays(days)
            setHours(hours)
            setMinutes(minutes)
        }
        timer = setInterval(showRemaining, 1000);
    }
    return (
        <div className='countdown'>
            <div>{days}:{hours}:{minutes}:{seconds}</div>
        </div>
    )
}