使用JavaScript完成定时广告弹出与关闭

缺乏、安全感 2022-03-25 05:51 615阅读 0赞

1、需求分析

在首页的顶部做一个定时弹出与关闭广告图片的效果

2、步骤分析

第一步：在页面指定位置隐藏一个广告图片（使用display属性的none值）

第二步：确定事件（onload）并为其绑定一个函数

第三步、书写绑定的函数（设置一个显示图片的定时操作）

第四步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值为block）

第五步：清除显示图片的定时操作

第六步：书写隐藏图片的定时操作（同三）

第七步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值为none）

第八步：清除隐藏图片的定时操作

3、代码实现：

JS代码：

<script>
        function init(){
            //1、设置显示广告图片的定时操作
            time = setInterval("showAd()",3000);
        }
    
        //2、书写显示广告图片的函数
        function showAd(){
            //3、获得广告图片的位置
            var adEle = document.getElementById("adImg");
            //4、修改属性为block，让其显示
            adEle.style.display = "block";
            //5、清除显示图片的操作
            clearInterval(time);
            //6、设置隐藏图片的定时操作(同1)
            time = setInterval("hideAd()",3000);
        }
    
        //7、书写隐藏广告图片的函数（同2）
        function hideAd(){
            //8、获取广告图片的位置并修改其属性为none，让其隐藏（同3、4的简写）
            document.getElementById("adImg").style.display = "none";
            //9、清除隐藏图片的定时操作(同5)
            clearInterval(time);
        }
    </script>

html代码：

<body onload="init()">
    
    
    
    <img src="img/addImg.png" width="100%" style="diaplay:none" id="addImg">

发表评论取消回复

表情：

评论列表（有 0 条评论，615人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript：layer关闭指定弹出窗口

JavaScript：layer关闭指定弹出窗口前言一、关闭指定窗口 1.关闭指定窗口：layer.close(index)——推荐用法

电玩女神/ 2024年03月16日 18:35/ 0 赞/ 99 阅读

相关怎么彻底关闭广告弹窗？

> 当你看完下面的方法 > 大家还知道还有哪些办法能彻底关闭广告弹窗呢？欢迎在评论区分享出来！❤️ 文章目录前言以Flash弹窗为例一、关闭

一时失言乱红尘/ 2023年09月30日 10:53/ 0 赞/ 18 阅读

相关使用JQuery完成定时弹出广告/图片

script部分 <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>

我会带着你远行/ 2023年06月08日 09:26/ 0 赞/ 57 阅读

相关 js实现定时弹出广告效果

获取图片的元素对象(document.getElementById(“”)) 隐藏图片：display：none 定时操作：setInterval(“显示图片的函数”，

一时失言乱红尘/ 2023年02月13日 08:41/ 0 赞/ 20 阅读

相关关闭弹出的WPS广告提示

每次打开wps都会弹出广告，怎么设置取消掉弹屏 ![format_png][] 去广告需要修改源文件，因此首先要进入wps的安装文件夹。具体方法是，右击桌面的“wps

迈不过友情╰/ 2022年11月24日 12:54/ 0 赞/ 229 阅读

相关 layui 关闭弹出框

作者：TROY\_Musou 原文：[https://blog.csdn.net/troy\_musou/article/details/73499459][https_b

快来打我*/ 2022年04月03日 13:40/ 0 赞/ 457 阅读

相关使用jQuery完成定时广告弹出与关闭（对比JavaScript）

JavaScript的书写在另一篇博客，可以对比地址：[https://blog.csdn.net/weixin\_42078450/article/details/865

水深无声/ 2022年03月25日 08:46/ 0 赞/ 265 阅读

相关使用JavaScript完成定时广告弹出与关闭

1、需求分析在首页的顶部做一个定时弹出与关闭广告图片的效果 2、步骤分析第一步：在页面指定位置隐藏一个广告图片（使用display属性的none值

缺乏、安全感/ 2022年03月25日 05:51/ 0 赞/ 616 阅读

相关 js定时弹出关闭广告

1 ![20190213134216264.png][] 2 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

超、凢脫俗/ 2022年03月20日 13:56/ 0 赞/ 241 阅读

相关 jQuery定时弹出广告

jQuery定时弹出广告 <!DOCTYPE html> <html> <head> <title>jquery定时弹出广告</title>

迷南。/ 2022年01月21日 09:09/ 0 赞/ 277 阅读