JavaScript 定时器

Posted усил

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 定时器相关的知识,希望对你有一定的参考价值。

<!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>

以上是关于JavaScript 定时器的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript的定时器是如何工作的

javascript:定时器

JavaScript 定时器

javascript定时器详解

关于JavaScript定时器我的一些小理解

JavaScript定时器