事件(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. Linux路由器及交换机工作原理

    IP包头中TTL字段的含义是什么?它用来做什么? TTL(time to live):该字段用于表示IP数据包的生命周期, 作用:限制一个数据在网络中无限循环的转发下去. 简述arp缓存表的建立过程: ...

  2. 复杂模拟 | 1017 模拟N个顾客M个柜台进行排队

    #include <stdio.h> #include <memory.h> #include <math.h> #include <string> # ...

  3. [LeetCode] 871. Minimum Number of Refueling Stops 最少的加油站个数

    A car travels from a starting position to a destination which is target miles east of the starting p ...

  4. find sum and average of n numbers

    public class Solution { public static void main(String[] args) { Scanner ip = new Scanner(System.in) ...

  5. Spring Boot下Bean定义方式及调用方式

    我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个类注入到spring容器中,交给spring容器进行管理,但是在实际当中,我们往往会碰到在一个普通的Java类中,想直接使用 ...

  6. Docker下构建centos7容器无法使用systemctl命令的解决办法

    最近在使用docker 构建centos7 容器时,发现无法使用systemctl 命令.后来万能的百度解决了问题,随记之以备后用. 解决办法: docker run --privileged -it ...

  7. win10如何将wps设置成默认应用

    1.在此之前,我们当然需要下载一个WPS软件了.如果还没有安装软件的,大家可以去网上搜一下“WPS”进入官网下载; 2.下载之后,我们进入开始菜单,然后点击所有应用,找到WPS; 3.之后就会看见“配 ...

  8. HTTP之缓存命中

    缓存命中和缓存未命中 ========================摘自<HTTP权威指南>============================== 1.缓存命中和缓存未命中 可以用 ...

  9. Idea java 中导包路径分析

    工具类所在包: 查看工具类详情: 调用这个工具类时,导入的包路径为: 路径就是第1张图片中的包名utils+类名NumberUtils组成的utils.NumberUtils

  10. mysql获取日期语句汇总

    汇总一些MySQL获取日期的SQL语句. -- 今天 SELECT DATE_FORMAT(NOW(),'%Y-%m-%d 00:00:00') AS '今天开始'; SELECT DATE_FORM ...