定时器延时器完成【流氓广告】 demo

最新推荐文章于 2025-11-24 11:21:23 发布

原创最新推荐文章于 2025-11-24 11:21:23 发布 · 189 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文详细介绍了JavaScript中的定时器（setInterval）和延时器（setTimeout）的使用，包括它们的工作原理、常见应用场景及注意事项。通过示例展示了如何使用定时器创建循环广告，即使广告被关闭，也能在设定的延迟后重新显示。此外，还探讨了时间间隔的最小值与计算机刷新频率的关系。

 for循环 一次性 执行所有的 循环次数
    瞬间执行完毕 所有的 循环次数 
    循环到了设定的条件 循环就终止了
    
    
 定时器 延时器
    定时器:
        按照设定的时间间隔 循环往复 执行代码程序
        只要 不停止 会一直执行

        语法:
            setIntervale( 参数1 , 参数2 )
                参数1 : 回调函数 每次时间间隔之后 执行的程序内容
                        一般是 匿名函数function(){} 形式 或者 已经定义好的函数名称
                        注意 赋值 函数名称 不要加 () 加了 小括号 是 调用函数 

                参数2 : 设定的时间间隔
                        时间间隔 单位是 毫秒
                        最小值 跟 计算机硬件设备相关

                所有的电脑都有 刷新频率 一般的是 60赫兹 Hz
                60赫兹 就是 一秒刷新 60次
                刷新一次 间隔 16.666.... 毫秒
                一般 时间间隔 最小值 是 20毫秒

    延时器
            按照设定的时间间隔 延迟程序的执行
            只会 延迟触发执行一次

            setTimeout( 参数1 , 参数2 )
                    参数1 : 回调函数 每次时间间隔之后 执行的程序内容

                    参数2 : 设定的时间间隔

        注意:
            定时器 和 延时器 在 第一次时间间隔到达之前 不会执行程序
            例如 设定 定时器 延时器的时间间隔是3秒 
            第一个 3秒 是没有执行程序  3秒 结束 才会有第一次执行程序

【流氓广告】
思路:

关闭之后过一段时间就会再出现
点击span让div消失 css属性 display设定为 none
同时设定一个延时器经过延迟的时间
再给 div css属性 display设定为 block

~~css代码~~

div{
            width: 200px;
            height: 200px;
            background: pink;
            position: fixed;
            top:200px;
            left: 300px;
        }
        div>span{
            display: block;
            width: 50px;
            height: 50px;
            background-image: url('./1.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            position: absolute;
            right: 0;
            top:0;
        }

~~js代码~~

 <div>
        我是广告div
        <span></span>
    </div>
    <script>
        // 获取标签对象
        var oDiv = document.querySelector('div');
        var oSpan = document.querySelector('span');

        // 给 span标签添加点击事件
        oSpan.addEventListener('click' , function(){
            // 点击span标签时执行的程序
            // 让div的style,display 为 none
            oDiv.style.display = 'none';

            // 同时 设定一个 延时器
            setTimeout( function(){
                // 延迟 3秒 后 设定  div style display 为 block
                // 也就是 3秒 后 div 再次显示
                oDiv.style.display = 'block';
            } , 3000);
        })