10月25日定时函数

最新推荐文章于 2024-09-01 13:33:34 发布

Chenche_

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量134

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Chenche_/article/details/127519413

版权

知识点；

setTimeout(function,times);间隔times毫秒后执行

参数fn；是一个函数

参数times；间隔的时间，单位是毫秒

函数的返回值是一个定时器对象。

例一计数器

 <!-- 一、定时器函数二 -->
    <button id="but_start">开始</button>
    <button id="but_stop">停止</button>

    <script>

        // setInterval(function () {//重复执行函数
        //     console.log('计数器')
        // }, 1000)
        //   1 获取按钮；
        let start = document.querySelector('#but_start')
        let stop1 = document.querySelector("#but_stop")

        //2 ，按钮事件监听 
        start.addEventListener('click', function () {
            timer = setInterval(function () {
                console.log('Hello Word!')
            }, 1000)
        })
            // 3.单击停止按钮，清除定时器
            stop1.addEventListener('click',function(){
                clearInterval(timer)
            })
    </script>

联系二将倒计时引入div里面

<style>
    #bos {
        /* width: 200px;
        height: 180px;
        background-color: red; */
        color: red;
        font-size: 20px;
        margin: auto;
    }
</style>

<body>
    <!-- 一 -->

    <!-- <div class="box"></div>
    <br><br>
    <button class="but_wart">开始</button>

    <script>
        // 1.获取标签
        let mydiv = document.querySelector('.box')
        let btn = document.querySelector('.but_wart')

        //2.给按钮注册事件
        btn.addEventListener('click', function () {
            //  将字符串写入div里面
            mydiv.innerHTML = '<h2>床前明月光</h2>'
        })
    </script> -->


    <!-- 二 -->
    <div id="bos"></div>
    <script>
        // 1,定义定时器函数
        function showTime() {
            let start = new Date()//当前日期
            let end = new Date('2023-1-1')

            let times = end - start

            let d = parseInt(times / 1000 / 60 / 60 / 24)
            d = d < 10 ? '0' + d : d

            let h = parseInt(times / 1000 / 60 / 60 % 24)
            h = h < 10 ? '0' + h : h

            let m = parseInt(times / 1000 / 60 % 60)
            m = m < 10 ? '0' + m : m

            let s = parseInt(times / 1000 % 60)
            s = s < 10 ? '0' + s : s

            let str = `距离2023年春节还有 ${d} 天 ${h} 时 ${m} 分 ${s} 秒`

            let mydiv = document.querySelector('#bos')

            mydiv.innerHTML = str
        }
        setInterval(showTime, 1000)
    </script>