在观看视频时候总会发现有广告弹出

这里就做一个类似这样的定时弹出广告的实例:

前面的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:定时弹出广告的更多相关文章

  1. 【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)

     事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...

  2. 使用JS完成首页定时弹出广告图片

    一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none        定时操作: setInterval(“显示图片的函数”, 3000); 三.代 ...

  3. JavaScript学习——使用JS完成页面定时弹出广告

    1.获取图片的位置(document.getElementById(“”))  隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...

  4. 使用jquery完成定时弹出广告图片

    <script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...

  5. jQuery学习(二)——使用JQ完成页面定时弹出广告

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...

  6. JS练习:定时弹出广告

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  7. jQuery网页定时弹出广告

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  8. JavaScripts广告轮播图以及定时弹出和定时隐藏广告

    轮播图: 函数绑定在body标签内 采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...

  9. 009-定时关闭弹出广告窗口 By BoAi 20190414

    ;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...

随机推荐

  1. Keepalived+MySQL实现高可用

    MySQL的高可用方案有很多,比如Cluster,MMM,MHA,DRBD等,这些都比较复杂,我前面的文章也有介绍.最近Oracle官方也推出了Fabric.有时我们不需要这么复杂的环境,这些方案各有 ...

  2. ArcGIS自定义工具箱-列举损坏的数据源

    ArcGIS自定义工具箱-列举损坏的数据源 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:查找地图文档中损坏的数据源链接 使用方法:参数可选,默认为当前(ar ...

  3. 深度学习中,使用regularization正则化(weight_decay)的好处,loss=nan

    刚开始训练一个模型,自己就直接用了,而且感觉训练的数据量也挺大的,因此就没有使用正则化, 可能用的少的原因,我也就不用了,后面,训练到一定程度,accuracy不上升,loss不下降,老是出现loss ...

  4. mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug

    打电话.发短信 https://blog.csdn.net/itguangit/article/details/78210770

  5. JAVA远程调试

    1.远程端启动必须添加jvm参数 -Xdebug -Xrunjdwp:transport=dt_socket,suspend=n,server=y,address=${debug_port} 其中de ...

  6. Educational Codeforces Round 63-D(基础DP)

    题目链接:https://codeforces.com/contest/1155/problem/D 题意:给定n个数,可以选择一段连续子段将其乘x,也可以不操作,求最大连续子段和. 思路:比赛时觉得 ...

  7. 机器学习性能指标(ROC、AUC、召回率)

    混淆矩阵 构造一个高正确率或高召回率的分类器比较容易,但很难保证二者同时成立 ROC 横轴:FPR(假正样本率)=FP/(FP+TN) 即,所有负样本中被分错的比例 纵轴:TPR(真正样本率)=TP/ ...

  8. django mysql 数据库配置

    在settings.py中保存了数据库的连接配置信息,Django默认初始配置使用sqlite数据库. DATABASES = { 'default': { 'ENGINE': 'django.db. ...

  9. WordPress 自动初始化数据库

    背景 自动化搭建开发环境.测试.部署如通过网页操作(访问 /wp-admin/install.php)相对比较麻烦且在有的场景无法实现. 步骤 修改 wp-config.php 配置 wordpres ...

  10. 使用sublime 正则匹配替换大批量代码

    1,在使用Django框架时,导入之前没有使用框架完成的网页,这时会遇到静态文件地址不匹配的问题,需要大量修改. 研究了一下sublime编译器,大家都使用正则匹配替换 2,位置在查找--替换与匹配, ...