【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)
事件(onload)
*注意点:
- 变量加var局部变量,不加var全局变量
- setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
返回值:返回一个 ID(数字),可以将这个ID传递给clearInterval(),clearTimeout() 以取消执行
- style="display:none" (隐藏元素)
●display:none和visible:hidden都能把网页上某个元素隐藏起来。
但两者有区别:
●display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
●visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
(参考)https://zhidao.baidu.com/question/569829578.html
- style="display:block" (显示元素)
- 不支持绑定多个事件,不要那么做!
步骤分析:
代码实现
JS部分
- <script>
- function init() {
- // //案例二:书写轮播图片显示的定时操作(3秒)
- // window.setInterval("changeImg()", 3000); //window可以省略不写
- //案例三:1.设置显示广告图片的定时操作
- //这里不能加var:加var局部变量,不加var全局变量
- time=setInterval("showAd()", 3000);
- }
- //书写函数
- var i = 0;
- function changeImg() {
- i++;
- //获取图片位置并设置src属性值
- document.getElementById("img1").src = "../img/" + i + ".jpg";
- if (i == 2) {
- i = 0;
- }
- }
- //2.书写显示广告图片的函数
- function showAd(){
- //3.获取广告图片位置
- var adEle=document.getElementById("img2");
- //4.修改元素里面的属性让其显示
- adEle.style.display="block";
- //5.清除显示图片的定时操作
- clearInterval(time);
- //6.设置隐藏图片的定时操作
- time=setInterval("hiddenAd()",3000);
- }
- //7.书写隐藏图片的函数
- function hiddenAd(){
- //8.获取图片位置并设置style属性的display值为none
- document.getElementById("img2").style.display="none";
- //9.清除隐藏图片的定时操作
- clearInterval(time);
- }
- </script>
html部分
- <body onload="init()">
- <!--定时弹出广告图片位置-->
- <!--display:none 隐藏元素-->
- <img src="../img/middle01.jpg" width="100%" style="display:none" id="img2"/>
结果:
【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)的更多相关文章
- JavaScript学习——使用JS完成页面定时弹出广告
1.获取图片的位置(document.getElementById(“”)) 隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...
- 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带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
随机推荐
- 洛谷 P1910 L国的战斗之间谍
洛谷 P1910 L国的战斗之间谍 传送门 思路 二维背包模板题 三维肯定会爆掉,所以换二维 代码 #include <bits/stdc++.h> #define N 1111 usin ...
- TensorFlow基础篇
Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算.TensorFlow的运行机制属于“定义”和“运行”相分离.模型的构建只是相当于定义了一个图结构(代表一个计算任务),图中有 ...
- Django-Debug-Toolbar插件
目录 django配置插件: 介绍: 安装及配置: 优化ORM: django配置插件: ---配置Django-Debug-Toolbar 介绍: Django-Debug-Toolbar是项目开发 ...
- [LeetCode] 457. Circular Array Loop 环形数组循环
You are given a circular array nums of positive and negative integers. If a number k at an index is ...
- API加密框架原理解密
关于框架的使用文章请参考: 前后端API交互如何保证数据安全性?:http://cxytiandi.com/blog/detail/20235 API数据加密框架monkey-api-encrypt: ...
- js实现一键复制
方法一: 使用插件 引入clipboard.js 使用如下 <script> copyFn = function() { var clipboard = new Clipboard('.c ...
- dskms改为ckplayer播放器
将ckplayer代码文件夹上传到/var/www/html/public/static/plugins/目录下修改/var/www/html/application/home/view/defaul ...
- Vue2 实践揭秘 错误列表
京东上的购买地址 作者是土生土长的聪明中国人 https://item.jd.com/12176536.html 64页 const bookID = this.$router.params.id 搞 ...
- Vue官方文档笔记(二)
23.$refs是什么东东? 通过在标签上设置ref属性,然后在Vue实例方法中可以通过$refs拿到这些标签,如: <input ref="input"> metho ...
- jquery库与其他库(比如prototype)冲突的解决方法
前端开发很容易会遇到jQuery库与其他库冲突的场景,比如和prototype库冲突. 实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的. 解决方法,就是使用jQuery提供的jQu ...