事件(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. [LeetCode] 878. Nth Magical Number 第N个神奇数字

    A positive integer is magical if it is divisible by either A or B. Return the N-th magical number.  ...

  2. [LeetCode] 874. Walking Robot Simulation 走路机器人仿真

    A robot on an infinite grid starts at point (0, 0) and faces north.  The robot can receive one of th ...

  3. [LeetCode] 435. Non-overlapping Intervals 非重叠区间

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  4. 《30天自制操作系统》笔记3 --- （Day2 上节）完全解析文件系统

    Day2 汇编语言学习与Makefile入门 本文仅带着思路,研究源码里关于文件系统的参数 关于day2主程序部分及更多内容,请看<30天自制操作系统>笔记 导航 发现学习中的变化 源码差 ...

  5. vagrant 共享本地目录

    安装nfs插件 vagrant plugin install vagrant-winnfsd 打开windows上的vagrantfile 修改如下: Vagrant.configure(" ...

  6. mysql 基本操作 四

    1.临时表 当绘画结束时,临时表会自动销毁,无法用show tables 查看 临时表. MariaDB [jason]> create temporary table tmp(pro ),ci ...

  7. mybatis 的 dao 接口跟 xml 文件里面的 sql 是如何建立关系的？

    mybatis 会先解析这些xml 文件,通过 xml 文件里面的命名空间 (namespace)跟dao 建立关系:然后 xml 中的每段 sql 会有一个id 跟 dao 中的接口进行关联. 那么 ...

  8. kubernetes使用阿里云cpfs持久存储

    目录 简介 安装cpfs客户端 kubernetes使用cfs作为持久存储 简介 cpfs的具体介绍可参考这里: https://help.aliyun.com/document_detail/111 ...

  9. 配置 SSL、TLS 以及 HTTPS 来确保 Elasticsearch、Kibana、Beats 和 Logstash 的安全

    配置主机hosts文件 192.168.75.20 filebeat.local kibana.local logstash.local 192.168.75.22 node2.elastic.tes ...

  10. [转] Performance — 前端性能监控利器

    timing (PerformanceTiming) 从输入url到用户可以使用页面的全过程时间统计,会返回一个PerformanceTiming对象,单位均为毫秒 按触发顺序排列所有属性:(更详细标 ...