事件(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部分

  1. <script>
  2. function init() {
  3. // //案例二:书写轮播图片显示的定时操作(3秒)
  4. // window.setInterval("changeImg()", 3000); //window可以省略不写
  5.  
  6. //案例三:1.设置显示广告图片的定时操作
  7. //这里不能加var:加var局部变量,不加var全局变量
  8. time=setInterval("showAd()", 3000);
  9. }
  10.  
  11. //书写函数
  12. var i = 0;
  13. function changeImg() {
  14. i++;
  15. //获取图片位置并设置src属性值
  16. document.getElementById("img1").src = "../img/" + i + ".jpg";
  17. if (i == 2) {
  18. i = 0;
  19. }
  20. }
  21.  
  22. //2.书写显示广告图片的函数
  23. function showAd(){
  24. //3.获取广告图片位置
  25. var adEle=document.getElementById("img2");
  26. //4.修改元素里面的属性让其显示
  27. adEle.style.display="block";
  28. //5.清除显示图片的定时操作
  29. clearInterval(time);
  30. //6.设置隐藏图片的定时操作
  31. time=setInterval("hiddenAd()",3000);
  32.  
  33. }
  34. //7.书写隐藏图片的函数
  35. function hiddenAd(){
  36. //8.获取图片位置并设置style属性的display值为none
  37. document.getElementById("img2").style.display="none";
  38. //9.清除隐藏图片的定时操作
  39. clearInterval(time);
  40. }
  41.  
  42. </script>

html部分

  1. <body onload="init()">
  1. <!--定时弹出广告图片位置-->
  2.  
  3. <!--display:none 隐藏元素-->
  4. <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. 洛谷 P1910 L国的战斗之间谍

    洛谷 P1910 L国的战斗之间谍 传送门 思路 二维背包模板题 三维肯定会爆掉,所以换二维 代码 #include <bits/stdc++.h> #define N 1111 usin ...

  2. TensorFlow基础篇

    Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算.TensorFlow的运行机制属于“定义”和“运行”相分离.模型的构建只是相当于定义了一个图结构(代表一个计算任务),图中有 ...

  3. Django-Debug-Toolbar插件

    目录 django配置插件: 介绍: 安装及配置: 优化ORM: django配置插件: ---配置Django-Debug-Toolbar 介绍: Django-Debug-Toolbar是项目开发 ...

  4. [LeetCode] 457. Circular Array Loop 环形数组循环

    You are given a circular array nums of positive and negative integers. If a number k at an index is ...

  5. API加密框架原理解密

    关于框架的使用文章请参考: 前后端API交互如何保证数据安全性?:http://cxytiandi.com/blog/detail/20235 API数据加密框架monkey-api-encrypt: ...

  6. js实现一键复制

    方法一: 使用插件 引入clipboard.js 使用如下 <script> copyFn = function() { var clipboard = new Clipboard('.c ...

  7. dskms改为ckplayer播放器

    将ckplayer代码文件夹上传到/var/www/html/public/static/plugins/目录下修改/var/www/html/application/home/view/defaul ...

  8. Vue2 实践揭秘 错误列表

    京东上的购买地址 作者是土生土长的聪明中国人 https://item.jd.com/12176536.html 64页 const bookID = this.$router.params.id 搞 ...

  9. Vue官方文档笔记(二)

    23.$refs是什么东东? 通过在标签上设置ref属性,然后在Vue实例方法中可以通过$refs拿到这些标签,如: <input ref="input"> metho ...

  10. jquery库与其他库(比如prototype)冲突的解决方法

    前端开发很容易会遇到jQuery库与其他库冲突的场景,比如和prototype库冲突. 实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的. 解决方法,就是使用jQuery提供的jQu ...