事件(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. Win10提示 该文件没有与之关联的程序来执行操作

    在Win10 2018年更新系统中,如果你手动删除注册表里的快捷箭头注册项,就会打开固定到底部任务栏的应用就会报错,要想恢复正常,先手动恢复原来删除的注册表项. 注册表位置:HKEY_CLASSES_ ...

  2. CF1175D Array Splitting

    题目链接 题意 给出一个长度为\(n\)的序列\(a\),要求分为恰好\(K\)段.第\(i\)个点的贡献是\(a_i \times f(i)\),\(f(x)\)表示x所属的是第几段. 思路 非常巧 ...

  3. 第02组 Beta冲刺（3/4）

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  4. withDefaultPasswordEncoder() 过时弃用问题

    在学springsecurity5.X时,在demo里,内存配置用户的时候,提示withDefaultPasswordEncoder过时,特查看了源码,官方给出的理由是: /** @deprecate ...

  5. $ is not defined与SpringMVC访问静态资源

    编写前台Jquery代码时,遇到谷歌浏览器报错:Uncaught ReferenceError: $ is not defined 意味着Jquery库并没有导入到页面.这是有几种情况需要考虑: 1. ...

  6. 刷完欧拉计划中难度系数为5%的所有63道题，我学会了Rust中的哪些知识点？

    我为什么学Rust? 2019年6月18日,Facebook发布了数字货币Libra的技术白皮书,我也第一时间体验了一下它的智能合约编程语言MOVE,发现这个MOVE是用Rust编写的,看来想准确理解 ...

  7. Java连载17-赋值类运算符&字符串的连接运算符

    一.赋值运算符 1.赋值类运算符包括两种: (1)基本赋值运算符:= (2)扩展的赋值运算符: +=     -=    *=    /=    &= 赋值类的运算符优先级:先执行等号右边的表 ...

  8. Linux下Maven私服Nexus3.x环境构建操作记录

    原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79553747 私服介绍 私服是指私有服务器,是架设在局域网的一种特殊的远程仓库, ...

  9. LeetCode 118：杨辉三角 II Pascal's Triangle II

    公众号:爱写bug(ID:icodebugs) 作者:爱写bug 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. Given a non-negative index k whe ...

  10. [转] vue前端异常监控sentry实践

    1. 监控原理 1.1 onerror 传统的前端监控原理分为异常捕获和异常上报.一般使用onerror捕获前端错误: window.onerror = (msg, url, line, col, e ...