事件(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" （显示元素）
  • 不支持绑定多个事件，不要那么做！

步骤分析：

第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()

代码实现

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"/>

结果：

http://127.0.0.1:8020/WEB03_JS/%E6%A1%88%E4%BE%8B%E4%B8%89%EF%BC%9A%E4%BD%BF%E7%94%A8JS%E5%AE%8C%E6%88%90%E9%A1%B5%E9%9D%A2%E5%AE%9A%E6%97%B6%E5%BC%B9%E5%87%BA%E5%B9%BF%E5%91%8A/%E4%BD%BF%E7%94%A8JS%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%AE%9A%E6%97%B6%E5%BC%B9%E5%87%BA%E5%B9%BF%E5%91%8A.html

【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)的更多相关文章

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

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

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

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

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

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

  4. JS练习：定时弹出广告

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

  5. JS应用实例3：定时弹出广告

    在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...

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

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

  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. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

随机推荐

  1. windows下sed回车换行符处理

    windows下sed回车换行符处理如果用sed for windows对整个文件进行了编辑,编辑之后一般需要处理回车换行符:rem windows的回车换行符是\r\n,linux的是\n,所以要替 ...

  2. luogu P5606 小 K 与毕业旅行 - 构造 - 多项式

    题目传送门 传送门 先考虑 $a_i > 0$ 的情况.考虑构造这样一个顺序:$a_i$ 要么和后面的数的乘积都大于 $w$ 要么都小于等于 $w$. 这个构造可以这样做: vector< ...

  3. js中的super

    1.this和super的区别: this关键词指向函数所在的当前对象 super指向的是当前对象的原型对象 2.super的简单应用 const person = { name:'jack' } c ...

  4. java线程池模拟并发

    public class CountDownLatchTest1 implements Runnable{ final AtomicInteger number = new AtomicInteger ...

  5. k8s之系统组件架构-02

    k8s系统架构图 网络组件:calico+kube-proxy(IPVS) 网络暴露:traefik+ingress,分别对HTTP与TCP的服务暴露 存储:glusterfs(heketi管理) 日 ...

  6. Qt Quick 多媒体 - 播放音乐和视频

    MediaPlayer 是 QML 提供的核心多媒体类,可以播放音频.视频.要使用 MediaPlayer,需要引入 QtMultimedia 模块,在 QML 文档的开始加入 "impor ...

  7. [数据库] SQL 语法之进阶篇

    一.创建计算字段 下面介绍什么是计算字段,如何创建计算字段,以及如何从应用程序中使用别名引用它们. 1.1 计算字段 存储在数据库表中的数据一般不是应用程序所需要的格式,下面举几个例子. 需要显示公司 ...

  8. Scratch 3.6环境搭建（万江波实战记录）

    1.Scratch官网在线环境 官方网址:scratch.mit.edu 进入后,点击“Create”建立 2. Scratch官网在线环境_简体中文(点击这个地球) 3-选择:创意 4-进入”创意“ ...

  9. ant-design-pro引用css

    ant-design-pro中默认只能引用less文件,引用了css文件也是无效的.所以需要在配置文件config.js中找到  cssLoaderOptions,在 getLocalIdent中加入 ...

  10. Phaser也可以实现countdownLatch的功能

    /** * 可用用phaser模拟countDownLatch * awaitAdvance方法:如果传入的参数和当前的phase相等,线程就阻塞住等待phase的值增加:否则就立即返回 */ pub ...