javascript用普通函数和立即执行函数实现简单60秒倒计时效果

最新推荐文章于 2023-07-29 09:20:31 发布

渡湫..

最新推荐文章于 2023-07-29 09:20:31 发布

阅读量1k

点赞数

文章标签： javascript css 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_63689815/article/details/128980860

版权

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px;
            line-height: 200px;
            text-align: center;
            background-color: skyblue;
            opacity: 0.5;
            font-size: 35px;
        }
</style>

普通函数的写法

<body>
    <div></div>
    <script>
        // 60秒倒计时
        let div = document.querySelector('div')

        let getTimer = function (time) {    // 也可以写成 function getTimer(time)
            let i = 0
            let n = time  // 接收需要的倒计时秒数
            while (i < n) {  
                setTimeout(function () {
                    div.innerHTML = n--  // 60秒慢慢递减
                }, i * 1000)
                i++  // 防止while死循环
            }

            setTimeout(() => {
                div.innerHTML = '时间到了'  // 再开一个定时器，该定时器在倒计时执行完毕后执行
            }, n * 1000)
        }

        getTimer(60)
    </script>
</body>

立即执行函数写法

; (function getTimer(time) {  // 一定要在立即执行函数的开头或者上一句代码的末尾添加一个分号，否者会误认为是一条语句然后报错
    let i = 0
    let n = time
    while (i < n) {
        setTimeout(function () {
            div.innerHTML = n--
        }, i * 1000)
        i++
    }
    setTimeout(() => {
        // console.log(')
        div.innerHTML = '时间到了'
    }, n * 1000)
})(60)  // 传入需要的倒计时秒数

由于本人不会上传动图，只能把开始和结束的样子展现出来😊

渡湫..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript用普通函数和立即执行函数实现简单60秒倒计时效果

两种函数写法实现简单60秒倒计时效果
复制链接

扫一扫

javascript用普通函数和立即执行函数实现简单60秒倒计时效果

“相关推荐”对你有帮助么？