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

缺乏、安全感 2022-03-25 05:51 569阅读 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 条评论，569人围观）

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

相关阅读

相关 JavaScript前端：输入框关闭弹出历史记录功能

JavaScript前端：输入框关闭弹出历史记录功能前言一、取消输入框弹出历史记录 1.利用input标签的autocomplete属性

绝地灬酷狼/ 2024年03月30日 17:18/ 0 赞/ 32 阅读

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

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

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

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

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

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

相关 JavaScript弹出层的使用

1、在前台页面中，弹出层是一个比较常用的功能。现在分享一下关于alert和confirm弹出层的使用技巧。在layer的基础上对alert和confirm进行了重写，使得使用起

刺骨的言语ヽ痛彻心扉/ 2022年07月12日 12:10/ 0 赞/ 159 阅读

相关 layui 关闭弹出框

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

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

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

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

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

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

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

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

相关 js定时弹出关闭广告

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

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

相关 jQuery定时弹出广告

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

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

相关 JavaScript完成简单的对联广告

非常简单的使用方法，只需在需要加入广告的页面引入一个js文件即可。 javascript文件（ad.js）如下: lastScrollY = 0;

梦里梦外;/ 2021年06月10日 20:41/ 0 赞/ 492 阅读