JavaScript学习——使用JS完成页面定时弹出广告
1、获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);
2、步骤分析 （此案例页面定时弹出广告基于JavaScript学习——实现首页轮播图效果实现的）
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
<script>
function init(){
//书写轮播图显示的定时操作
setInterval("changImg()",3000);
//1.设置显示广告图片的定时操作
time=setInterval("showAd()",3000);
} //书写轮播图函数
var i=1;
function changImg(){
i++; //获取图片位置并设置src属性值
document.getElementById("img_1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
} //2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle=document.getElementById("img_2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display="block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
} //7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img_2").style.display="none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>
HTML代码：
<body body onload="init()">
<!--定时弹出广告图片位置-->
<img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/>
3、最终实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid black;
width: 1300px;
height: 1600px;
margin: auto;
}
#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}
.top{
border: 0px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
} #menu{
border: 0px solid red;
width:1300px;
height: 50px;
background: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#product{
border: 0px solid goldenrod;
width: 1300px;
height: 550px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 43px;
padding-top: 5px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 498px;
} #product_bottom_left{
border: 0px solid red;
width: 200px;
height: 498px;
float: left;
}
#product_bottom_right{
border: 0px solid saddlebrown;
width: 1094px;
height: 498px;
float: left;
}
#big{
border: 0px solid hotpink;
width: 545px;
height: 247px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 247px;
float: left;
/*让里面的内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
/*去掉超链接的下划线*/
a{
text-decoration: none;
}
</style> <script>
function init(){
//书写轮播图显示的定时操作
setInterval("changImg()",3000);
//1.设置显示广告图片的定时操作
time=setInterval("showAd()",3000);
} //书写轮播图函数
var i=1;
function changImg(){
i++; //获取图片位置并设置src属性值
document.getElementById("img_1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
} //2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle=document.getElementById("img_2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display="block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
} //7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img_2").style.display="none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>
</head>
<body body onload="init()">
<div id="father">
<!--定时弹出广告图片位置-->
<img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/> <!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px" />
</div>
<div class="top">
<img src="../img/header.png" height="46px"/>
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div> <!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: large;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
</ul>
</div> <!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" height="100%" id="img_1"/>
</div> <!--4.最新商品-->
<div id="product"> <div id="product_top">
<span style="font-size: 25px">最新商品</span>
<img src="../img/title2.jpg"/>
</div> <div id="product_bottom"> <div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div> <div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
</div> <div class="small">
<a href="#"><img src="../img/small01.jpg" ></a>
<a href="#"><p style="color: gray;">榨汁机</p></a>
<p style="color: red;">599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small02.jpg" ></a>
<a href="#"><p style="color: gray;">电视机</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg" ></a>
<a href="#"><p style="color: gray;">锅</p></a>
<p style="color: red;">399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small04.jpg" ></a>
<a href="#"><p style="color: gray;">面包机</p></a>
<p style="color: red;">799</p>
</div>
<div class="small">
<a href="#"><img src="../img/small05.jpg" ></a>
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">899</p>
</div>
<div class="small">
<a href="#"><img src="../img/small06.jpg" ></a>
<a href="#"><p style="color: gray;">洗衣机</p></a>
<p style="color: red;">999</p>
</div>
<div class="small">
<a href="#"><img src="../img/small07.jpg" ></a>
<a href="#"><p style="color: gray;">扫地机器人</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small09.jpg" ></a>
<a href="#"><p style="color: gray;">微波炉</p></a>
<p style="color: red;">1099</p>
</div>
<div class="small">
<a href="#"><img src="../img/small08.jpg" ></a>
<a href="#"><p style="color: gray;">压力锅</p></a>
<p style="color: red;">799</p>
</div>
</div>
</div>
</div> <!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%"/>
</div> <!--6.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div> <!--7.友情链接和版权信息-->
<div id="bottom">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</div>
</div>
</body>
</html>
在浏览器内运行，效果为页面停留三秒后显示广告，广告停留三秒后再消失。
JavaScript学习——使用JS完成页面定时弹出广告的更多相关文章
- 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)
事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...
- jQuery学习(二)——使用JQ完成页面定时弹出广告
1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...
- 使用JS完成首页定时弹出广告图片
一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none 定时操作: setInterval(“显示图片的函数”, 3000); 三.代 ...
- JS练习：定时弹出广告
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- JS应用实例3：定时弹出广告
在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...
- 使用jquery完成定时弹出广告图片
<script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...
- jQuery网页定时弹出广告
1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...
- JavaScripts广告轮播图以及定时弹出和定时隐藏广告
轮播图: 函数绑定在body标签内 采用3张图,1.jpg 2.jpg 3.jpg 利用定时任务执行设置图片属性 src 利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...
- JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
随机推荐
- 关于SqlBulkCopy的测试
最近要做.net关于sql大量插入,找到了sqlbulkcopy(自己google下,应该很多说明了)这个好东西,于是测试下性能,用了三个方法对比: 1)直接用ado.net,for循环N次进行单条插 ...
- Java 系列之Filter（一）
一.过滤器 过滤器就是在源数据和目的数据之间起过滤作用的中间组件.它可以截取客户端和资源之间的请求和响应信息,并且对这些信息进行过滤. 二.应用场景 1.对用户请求进行统一认证 2.对用户的访问请求进 ...
- 自动化框架的两种断言设计(pytest 版)
自动化测试断言失败时,根据不同业务场景,可能需要立即终止或继续执行.这里以 Appium + pytest 为例. 一. 断言失败立即终止 用途一:用例的预期结果是其他用例的前提条件时,assert ...
- JPush设置别名不走成功回调的解决办法
在参考了极光推送的文档之后,对个推(单个推送)有设置别名的方法,方法如下 [JPUSHService setTags:tags alias:alias fetchCompletionHandle:^( ...
- PHP关于注册注意的问题
1.注意转义字符的问题 get_magic_quotes_gpc()开启时,所有的 ' (单引号), " (双引号), \(反斜线) and 空字符(null)会自动转为含有反斜线的溢出字符 ...
- dp入门—数塔
在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 已经告诉你了,这是个DP的题 ...
- 注解实战@Test标签
1.创建一个Maven工程 2.点击java,右键-新建一个类 package com.course.testng; import org.testng.annotations.Test; publi ...
- centos7下安装pyspark
1.安装python 2.安装jdk 3.下载spark:http://spark.apache.org/downloads.html, 下载新版(spark-2.3.1-bin-hadoop2.7. ...
- TensorFlow+实战Google深度学习框架学习笔记（5）----神经网络训练步骤
一.TensorFlow实战Google深度学习框架学习 1.步骤: 1.定义神经网络的结构和前向传播的输出结果. 2.定义损失函数以及选择反向传播优化的算法. 3.生成会话(session)并且在训 ...
- Git diff 代码比较的高级技巧
Git diff 代码比较的高级技巧 作者:offbye 出处:http://blog.csdn.net/offbye/article/details/6592563 Git是使用branch来管理不 ...