JavaScript 定时器

最新推荐文章于 2024-07-26 11:41:15 发布

海面有风

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量51

点赞数

分类专栏：其他文章标签： javascript 前端 html 定时器

本文链接：https://blog.csdn.net/weixin_44659458/article/details/129007889

版权

其他专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 定时器</title>
</head>

<style>
    .container {
        display: flex;
        font-size: 0px;
    }

    .container > span {
        width: 60px;
        height: 60px;
        background-color: red;
        margin-right: 7px;
        font-size: 20px;
        text-align: center;
        line-height: 60px;
        color: #fff;
    }
</style>
<body>
    <div class="container">
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
</body>
<script>
    let time = 4234; // 秒

    (() => {
        const hourDom = document.querySelector(`.hour`);
        const minunteDom = document.querySelector(`.minute`);
        const secondDom = document.querySelector(`.second`);

        setInterval(() => {
            let hour = Math.floor(time / 3600);
            let min = Math.floor(time % 3600 / 60);
            let sec = time % 60;

            hour = hour >= 10 ? hour : `0${hour}`;
            min = min >= 10 ? min : `0${min}`;
            sec = sec >= 10 ? sec : `0${sec}`;

            hourDom.innerText = hour;
            minunteDom.innerText = min;
            secondDom.innerText = sec;
            --time;
        }, 1000);
    })();
</script>

</html>