事件(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学习笔记-第3天 - 勤能补拙

    学一门技术,基础一定要打牢,多练习是关键,还要尽可能理解其背后的知识.并时刻提醒自己,求知若饥,虚心若愚.

  2. 【转】机器学习实战之K-Means算法

    一,引言 先说个K-means算法很高大上的用处,来开始新的算法学习.我们都知道每一届的美国总统大选,那叫一个竞争激烈.可以说,谁拿到了各个州尽可能多的选票,谁选举获胜的几率就会非常大.有人会说,这跟 ...

  3. MySQL实战45讲学习笔记：第七讲

    一.上节回顾今日计划 在上一篇文章中,我跟你介绍了 MySQL 的全局锁和表级锁,今天我们就来讲讲 MySQL的行锁. MySQL 的行锁是在引擎层由各个引擎自己实现的.但并不是所有的引擎都支持行锁, ...

  4. [LeetCode] 684. Redundant Connection 冗余的连接

    In this problem, a tree is an undirected graph that is connected and has no cycles. The given input ...

  5. CentOS6.9安装MySQL5.6

    1 检查系统是否自带MySQL 检查系统是否自带MySQL yum list installed | grep mysql 下面结果说明系统自带MySQL 卸载系统自带MySQL yum -y rem ...

  6. WPF 目录树绑定 与 遍历

    定义树节点,(编译环境VS2017) public class GBTreeNode : INotifyPropertyChanged { private string _deviceId = str ...

  7. nginx location笔记

    nginx location笔记= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因此请求为/static/20%/aa,可以被规则 ...

  8. 19条常用的MySQL优化方法（转）

    本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下:1.EXPLAIN命令做MySQL优化,我们要善用EXPLAIN查看SQL执行计划.下面来个简单的示例,标注(1.2.3.4.5)我们 ...

  9. C++分治策略实现二分搜索

    问题描述: 给定已排好序的n个元素组成的数组,现要利用二分搜索算法判断特定元素x是否在该有序数组中. 细节须知: (1)由于可能需要对分治策略实现二分搜索的算法效率进行评估,故使用大量的随机数对算法进 ...

  10. golang学习笔记 --flag

    概述 flag包提供了一系列解析命令行参数的功能接口 命令行语法 命令行语法主要有以下几种形式 -flag //只支持bool类型 -flag=x -flag x //只支持非bool类型 以上语法对 ...