JS应用实例3:定时弹出广告
在观看视频时候总会发现有广告弹出
这里就做一个类似这样的定时弹出广告的实例:
前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写
用的时候引入即可
HTML代码:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body onload="init()">
<div>
<img src="./img/1.jpg" width="100%" style="display: none" id="img2" />
</div>
<script src="1.js" type="text/javascript"></script>
</body> </html>
JS代码:
function init() {
//设置显示广告图片的定时操作
time = setInterval("showAd()", 2000);
} function showAd() {
//获取广告图片的位置
var adEle = document.getElementById("img2");
//修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
//清除显示图片的定时操作
clearInterval(time);
//设置隐藏图片的定时操作
time = setInterval("hiddenAd()", 2000);
} //隐藏广告图片的函数
function hiddenAd() {
//获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display = "none";
//清除隐藏广告图片的定时操作
clearInterval(time);
}
BOM对象:
window:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window</title>
<script>
//确认删除框
confirm("确定删除吗?");
//输入框
prompt("请输入");
</script>
</head>
<body>
</body>
</html>
history:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history</title>
<script>
function back1(){
history.go(-1);
//history.back();返回上一页,两种方式效果相同
}
</script>
</head>
<body>
<input type="button" value="返回上一页" onclick="back1()" />
</body>
</html>
location:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location</title>
<script>
function func(){
location.href="4.html";
}
</script>
</head>
<body>
<input type="button" value="跳转页面" onclick="func()" />
</body>
</html>
JS应用实例3:定时弹出广告的更多相关文章
- 【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)
事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...
- 使用JS完成首页定时弹出广告图片
一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none 定时操作: setInterval(“显示图片的函数”, 3000); 三.代 ...
- JavaScript学习——使用JS完成页面定时弹出广告
1.获取图片的位置(document.getElementById(“”)) 隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...
- 使用jquery完成定时弹出广告图片
<script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...
- jQuery学习(二)——使用JQ完成页面定时弹出广告
1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...
- JS练习:定时弹出广告
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- 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 ...
- 009-定时关闭弹出广告窗口 By BoAi 20190414
;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...
随机推荐
- hdu2089-不要62-(数位dp)
不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Linux ssh命令
SSH(远程连接工具)连接原理:ssh服务是一个守护进程(demon),系统后台监听客户端的连接,ssh服务端的进程名为sshd,负责实时监听客户端的请求(IP 22端口),包括公共秘钥等交换等信息. ...
- CentOS7下安装Gitlab社区版【安装步骤、IP改域名、修改端口】
这两天一直在给公司的服务器配置Gitlab(10.5.4).过程很是痛苦,所以把过程记录一下. 1.安装CentOS7 从官网上下载了最新版CentOS-7-x86_64-DVD-1708.iso.用 ...
- 大数据入门到精通6---spark rdd reduce by key 的使用方法
1.前期数据准备(同之前的章节) val collegesRdd= sc.textFile("/user/hdfs/CollegeNavigator.csv")val header ...
- Python设计模式 - 基础 - 类/接口之间的六种关系
在程序中需要把世间万物抽象成相应的类,现实世界中物与物之间的关系和程序中类与类之间的关系相对应,因为世间万物是普遍联系的,所以程序中类与类之间也不是孤立的.在系统分析和框架设计中,根据面向对象机制的三 ...
- java通过年月得到该月每一天的日期
public static List<String> getDayByMonth(int yearParam,int monthParam){ List<String> lis ...
- c#NPOI读取excel 比interop和Microsoft.Jet.OLEDB.4.0 之类 的好的多
今天下午开始整理excel这块, 微软弄的那些库简直是个坑, 什么com注册之类的净是些报错. 在网上搜资料偶然碰见npoi ,好东西,值得使用 NPOI是指构建在POI 3.x版本之上的一个程序,N ...
- c#子线程线程中操作窗体更新的报错
用 在执行上传时,由于操作较长窗体界面卡住,于是用task解决 Task t1 = new Task(manage.UploadData); t1.Start(); 结果不卡了,程序也传完了,运行到更 ...
- 20172306 2018-2019《Java程序设计与数据结构课堂测试补充报告》
学号 2017-2018-2 <程序设计与数据结构>课堂测试补充报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 刘辰 学号:20172306 实验教师:王志强 必 ...
- 快速解决MariaDB无密码就可以登录的问题
mysql Ver 15.1 Distrib 10.1.37-MariaDB, for Linux (x86_64) using readline 5.1 #mysql -uroot -p #del ...