html+js+css在线倒计时

代码在图片后面  点赞加关注 谢谢大佬照顾😜

图例

时间到前

 时间到后

 源代码

倒计时

    body {

        display: flex;

        justify-content: center;

        align-items: center;

        height: 100vh;

        background-color: #f4f4f4;

        margin: 0;

        font-family: Arial, sans-serif;

    }

    .countdown-container {

        text-align: center;

        border-radius: 8px;

        padding: 20px;

        transition: border-color 0.3s ease;

    }

    h1 {

        font-size: 2.5em;

        color: #333;

        margin-bottom: 20px;

      text-align:center;

    }

    .time-left {

        font-size: 1.8em;

        color: #333;

        border: 2px solid #4caf50;

        padding: 10px;

        border-radius: 8px;

    }

    .time-left.time-up {

        border-color: #e74c3c;

    }

距离下班还1分钟

    const timeDisplay = document.querySelector('.time-left');

    let countdown = 1 * 60; // 5 minutes in seconds

    function updateCountdown() {

        let minutes = Math.floor(countdown / 60);

        let seconds = countdown % 60;

        minutes = minutes

        seconds = seconds

        timeDisplay.textContent = `距离下班还有${minutes}:${seconds}`;

        if (countdown