zoukankan      html  css  js  c++  java
  • 【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)

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

    <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

  • 相关阅读:
    字符串语法
    组合数
    并查集
    Java Collection HashMap源码分析
    Java 虚拟机 ClassLoader
    Java 多线程 Future
    Java 虚拟机 GC机制
    Java 基础 原生类型
    Java 多线程 死锁deadlock产生原因+避免方法
    Java 基础 基本类型vs引用类型,传值vs传引用
  • 原文地址:https://www.cnblogs.com/musecho/p/11013483.html
Copyright © 2011-2022 走看看