JS实现定时显示广告图片

最新推荐文章于 2024-10-18 19:00:00 发布
最新推荐文章于 2024-10-18 19:00:00 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/My_____Dream/article/details/79133154
版权
本文介绍了如何使用JavaScript实现广告图片的定时显示和隐藏。首先将广告图片设置为隐藏，然后在页面加载后启动定时器，每隔3秒显示图片，同时设置另一个定时器每2秒隐藏图片。通过全局变量控制图片显示次数，达到定时切换的效果。
摘要由CSDN通过智能技术生成

 

JS实现定时显示广告图片

一、步骤分析

1、在原页面插入广告图片，并使其style=“display：none”，即隐藏图片；

2、绑定页面加载事件并驱动定时器函数setTimeout（显示图片函数名，毫秒），定时器隔X毫秒后执行指定一次

3、编写显示图片函数通过document.getElementById("in4").style.display="block";显示图片，并声明另外一个隐藏图片函数，即  setInterVal（隐藏函数名，毫秒数）。每个X毫秒执行隐藏函数

4、编写隐藏函数，在函数内通过document.getElementById("in4").style.display="none";隐藏图片，然后再次声明定时器显示图片。  

5、通过全局变量，控制图片显示次数。

 

二、代码展示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS之首页展示</title>
<style>
#id9{
margin: 30px 260px 30px 150px;
font-family: "楷体";
}
body{ 
padding: 0;
margin: 0;
}
.c2{
width:50%;
height: 100px;
background:

最低0.47元/天 解锁文章
My_____Dream
关注
专栏目录
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
05-02
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
js定时显示广告的实现代码[已测]
10-28
有时候需要定时显示指定的广告，那么就可以参考下面的代码了
JavaScript网站定时弹出广告
mqingo的博客
11-06 516
需求分析:         一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！ 技术分析: a.定时器    setInterval : 每隔多少毫秒执行一次函数    setTimeout: 多少毫秒之后执行一次函数    clearInterval    clearTimeout b.显示广告 img.style.display  = "...
js中BOM的定时器
最新发布
QQ1257871322的博客
10-18 544
在JavaScript中，BOM（浏览器对象模型）中的定时器主要是通过和函数来实现的。这两个函数允许你在指定的时间延迟后执行代码或者定期执行某段代码。
JS定时器
qq_45938664的博客
06-29 7964
定时器定义：JavaScript中提供一定是时间之后触发的功能，就叫做定时器。JS的两种定时器：setTimeout函数：window.setTimeout(调用函数,[延迟毫秒数])； 注意：只会执行一次setInterval函数：window. setInterval(调用函数,[延迟毫秒数])； 注意：反复执行，每隔一个定时时间，就会执行一次 取消定时器：clearTimeout(timeoutID)方法 clearInterval(intervalID)方法Swiper介绍：swiper是一款开源的
分别使用js和JQuery实现html首页图片轮播以及广告图片定时弹出
bigLiu66的博客
09-16 1115
主要使用setInterval方法设置更新周期，clearInterval清除周期。（如果不清除会一直周期循环执行下去，而setTimeout只是在指定时间后执行一次，这里完全可以替换为setTimeout方法）   一、js首页轮播 第一步：确定事件(onload)并为其绑定一个函数 浏览器是边加载边执行的，先加载head 再加载body。了解body的onload事件的执行时间是非常重要...
关于js的小知识：使用JS定时弹出广告
YAOYU007的博客
04-09 641
准备工作： 1.JS的定时操作                     setInterval();                     setTimeout();                    clearInterval();                    clearTimeout(); 2.CSS控制显示和隐藏的属性                   dis
JavaScript实现定时隐藏与显示图片的方法
10-23
这样的操作对于实现动态效果非常有帮助，例如广告图片轮播、提示信息显示等场景。 实现这一功能首先需要理解JavaScript中的定时器函数setTimeout()。setTimeout()允许我们将一个函数调用推迟到指定的时间后执行。在...
js实现图片、广告显示
11-02
10几款精心收集的js图片显示实现 分享共同学习
javascript实现循环广告条效果
10-18
循环广告条的核心是通过JavaScript定时地更换显示在网页上的图片，从而达到广告条动态显示的效果。JavaScript通过窗口对象（window）的onload事件来执行当页面加载完毕后的相关操作，如本文中示例代码window.onload=...
jquery实现网页顶部定时广告，支持关闭隐藏
06-10
广告图片"> 广告标题 广告描述... 关闭广告 ``` 然后，使用jQuery编写JavaScript代码以实现广告的自动播放和控制功能。在`$(document).ready()`函数内进行操作，确保在页面加载完成后执行以下代码： ```...
js定时器的写法
farxix的博客
06-20 1962
js 定时器有以下两个方法： setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 setTimeout() ：在指定的毫秒数后调用函数或计算表达式。 setInterval() 语法 setInterval(code,millisec,lang) 参数 ...
js定时显示广告代码
qq_18660259的博客
08-11 447
这是一则定时显示广告的javascript代码，当然也可以定时显示某一区块内容，很实用。 function strToDate(str, ext) { if (str == null || str == '') return; var arys = new Array(); arys = str.split('-'); var newDate = new Date(arys[0],
js定时器
weixin_63760337的博客
08-09 2653
其次，合理设置定时器的间隔时间，以确保任务执行的频率适中。在上述示例中，我们首先使用setInterval创建了一个每隔1秒钟执行一次的定时器，并将其返回的ID存储在变量intervalId中。使用requestAnimationFrame函数，我们可以利用浏览器的优化能力，在每一帧中更新动画状态，创造出更加流畅和高效的动画效果。在Web开发中，JavaScript定时器扮演着重要的角色，它们允许我们按照设定的时间间隔执行代码，实现延迟执行和定时重复执行的功能。如果您有任何问题或疑问，请随时在评论区留言。
JavaScript 用定时器写一个实时显示时间的页面
MW
03-27 3272
定时器 格式：setInterval（函数，毫秒值）； 功能：每隔对应的毫秒值，执行一次传入的函数 用定时器一个实时显示时间的页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> <...
js 定时器
缘 源 园
04-12 2115
1. 定时器的介绍 定时器就是在一段特定的时间后执行某段程序代码。 2. 定时器的使用： js 定时器有两种创建方式： setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器 setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器 setTimeout函数的参数说明: 第一个参数 func , 表示定时器要.
JS实现先显示大图后自动收起显示小图的广告代码
10-23
总而言之，通过JavaScript实现“先显示大图后自动收起显示小图”的广告特效，是一种展示广告内容的有效方式，不仅能够增强广告的视觉冲击力，同时也能够提高用户对广告的关注度。开发者需要对DOM操作和JavaScript...
JavaScript定时器
热门推荐
weixin_52629158的博客
04-30 1万+
setInterval() ：是属于 window 的方法，按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。其中 回调函数 "clock()" 可以写在 双引号中，也可以写在单引号中。setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。clearInterval() 方法 的参数 必须是由 setInterval() 返回的 ID 值。(这个内容 描红显示)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值