页面定时弹出广告

最新推荐文章于 2024-05-30 10:17:26 发布
最新推荐文章于 2024-05-30 10:17:26 发布
阅读量658 收藏 5
点赞数
分类专栏： JavaScript 文章标签： 定时弹出广告 js实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26765193/article/details/85941048
版权
本文介绍了如何实现网页在加载完成5秒后自动弹出广告，并在5秒后自动关闭广告的功能。主要涉及的技术包括JavaScript的定时器setInterval和setTimeout，以及通过改变CSS属性控制广告的显示和隐藏。
摘要由CSDN通过智能技术生成

一、需求分析

一般网页，我们刚打开的时候，它会5秒之后，显示一个广告，5秒钟之后，广告自动关闭。

二、技术分析

1.定时器

  • setInterval：每隔多少毫秒执行一次函数
  • setTimeout：多少毫秒之后执行一次函数
  • clearInterval：停止定时器
  • clearTimeout

2.显示广告： img.style.display = "block"

3.隐藏广告：img.style.display = "none"

三、步骤分析

1.确定事件：页面加载完成的事件 onload

2.事件要触发函数：init()

3.init函数里面做一件事：

       （1）.启动一个定时器：setTimeout()

        （2）.显示一个广告

                 a.再去开启一个定时器5秒钟之后，关闭广告

四、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时弹出广告</title>
    <script>
        function hideAD(){
           var img = document.getElementById("img1
最低0.47元/天 解锁文章
callOfSZR
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定时器——自动弹出广告
xiaorouer888的博客
06-20 410
html部分<body> <img id="miaov" src="img/miaov.jpg" /> </body>css部分<style> body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; } img { display:none;} </style>js部分<scri
基于JQuery实现页面定时弹出广告
10-15
**基于JQuery实现页面定时弹出广告**\n\n在网页设计中，有时我们需要实现一些交互功能，如定时弹出广告，以吸引用户的注意力。本文将详细介绍如何利用JQuery库来实现在用户打开页面后，经过特定时间间隔自动弹出广告...
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
05-02
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
定时弹出广告
fulishafulisha的博客
12-04 516
Window 对象方法  1.setInterval（）:可按照指定的周期（以毫秒计）来调用函数或计算表达式 所以setInterval（para1,para2）第一个参数就是调用的函数或计算机表达式；第二个参数是设置的时间间隔 注：如果不对setInterval加以控制，这setinterval则会一直调用函数  如果要取消则可以直接使用clearInterval()方法(由 setI...
办公室救星--windows定时任务弹窗提醒脚本
最新发布
m0_66237295的博客
05-30 747
windows中设置定时提醒
jQuery定时弹出广告
Woo_home的博客
06-09 416
jQuery定时弹出广告 <!DOCTYPE html> <html> <head> <title>jquery定时弹出广告</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> </head> <b...
使用jQuery实现页面定时弹出广告效果
10-19
使用jQuery实现页面定时弹出广告效果的知识点涉及以下几个方面： 1. jQuery基础知识：jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互。在本例中，使用了...
网页头部自动弹出并定时关闭的广告代码
06-12
网页头部自动弹出并定时关闭的广告代码是一种常见的网页交互设计技术，主要目的是吸引...然而，需要注意的是，过度使用或设计不当的弹出广告可能会引起用户的反感，因此在设计时应考虑用户的接受度和网页的整体体验。
利用定时器控制网页小广告的弹出与隐藏
supertianjia
07-19 1521
第一步：编写一个简洁广告框 代码： &lt;div id="alert"&gt;             &lt;span id="delete"&gt;X&lt;/span&gt;             &lt;br /&gt;             &lt;h1&gt;一条广告&lt;/h1&gt;             &lt;p&gt;  
7.2页面定时弹出一个短暂的广告
P_ning的博客
07-12 319
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <script type="text/javascript"> window.setTimeout("st...
js定时显示广告的实现代码[已测]
12-12
代码如下:[removed] function strToDate(str, ext) { if (str == null || str == ”) return; var arys = new Array(); arys = str.split(‘-‘); var newDate = new Date(arys[0], arys[1] – 1, arys[2], 9, 0, 0); if (ext) { newDate = new Date(newDate.getTime() + 1000 * 60 * 60 * 24); } return new
广告定时投放
02-08
广告定时投放
定时关闭广告
06-08
类似腾讯网站的半屏幕广告定时关闭，半屏广告系列，使用Jquery的JS脚本
定时器应用-页面弹出广告
weixin_30381317的博客
11-15 102
页面弹出广告 HTML <div class="box" id="box"> <span>5s</span> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510215046666&di=6ca...
js定时显示广告代码
11-14 118
这是一则定时显示广告的javascript代码，当然也可以定时显示某一区块内容，很实用。 代码如下： function strToDate(str, ext) { if (str == null || str == '') return; var arys = new Array(); arys = str.split('-'); var newDate = new ...
定时弹出消息窗口的实现
weixin_30315905的博客
11-30 592
实现这个过程需要两个页面，一个页面用来弹出窗口（我们称它为主页面），一个是窗口页面。 1、在主页面中，加入一个隐藏按钮，用来定时的激发它的click事件。其html代码如下： <input id="btnhid_RefMsg" runat="server" onserverclick="btnhid_RefMsg_ServerClick" style="display: none...
jQuery实战：首页广告弹出与表格样式等操作
1. **页面定时广告弹出**： 需求是在首页logo上方定时显示和隐藏广告图片，使用`setInterval`函数配合jQuery的`show()`和`hide()`方法实现。开发者需要理解jQuery的选择器机制，如ID选择器（例如`$("#adImage")`）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值