第一阶段:前端开发_使用 JS 完成页面定时弹出广告

时间:2022-10-10 10:20:16

2018-06-05

 

使用 JS 完成页面定时弹出广告 

 

一、技术分析

  获取图片的位置:(document.getElementById(“”)) 

  隐藏图片:display:none

  定时操作:setInterval(“显示图片的函数”,3000); 

 

二、步骤分析

  第一步:在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)

  第二步:确定事件(onload)并为其绑定一个函数

  第三步:书写这个函数(设置一个显示图片的定时操作)

  第四步: 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)

  第五步:清除显示图片的定时操作()

  第六步:书写隐藏图片的定时操作

  第七步:书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)

  第八步:清除隐藏图片的定时操作() 

 

三、代码实现

<script>
     function init(){ //书写轮播图片的定时操作
        setInterval("changeImg()", 3000); //1.设置显示广告的定时操作
        time = setInterval("showAd()",3000); } //书写函数
      var i  = 0; function changeImg(){   i++; //获取图片位置并获取src属性
          document.getElementById("img1").src="../img/"+i+".jpg"; if(i==3){ i = 0; } } //2.书写显示广告图片的函数
      function showAd(){   //3.获取广告图片的位置
        var adEle = document.getElementById("Ad");   //4.修改广告图片里面的属性让其显示
        adEle.style.display = "block";    //5.清除显示广告的定时操作
 clearInterval(time); //6.设置隐藏图片的定时操作
         time = setInterval("hiddenAd()",3000); }  //7.书写隐藏广告图片的函数
     function hiddenAd(){ //8.获取广告图片并设置其style属性的display值为none 
         document.getElementById("Ad").style.display = "none"; //9.清除隐藏广告图片的定时操作 
 clearInterval(time); }
</script>

 

HTML代码:

    <body onload="init()">
        <div id="father">
            <!--定时弹出广告部分-->
            <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="Ad"/>

 

------------------------------------------------------------------------------------------

 

四、总结 

4.1 javascript 的引入方式

   内部引入方式
    直接将 javascript 代码写到<script type=”text/javascript”></script>
   外部引入方式
    需要创建一个.js文件,在里面书写javascript代码,然后在html文件中通过script 标签的 src 属性引入该外部的 js 文件

  

4.2 BOM 对象
  BOM 对象:浏览器对象模型(操作与浏览器相关的内容)
   Window 对象
    Window 对象表示浏览器中打开的窗口。

     Window 对象方法:

 

      setInterval():它有一个返回值,主要是提供给 clearInterval 使用。

       setTimeout():它有一个返回值,主要是提供给 clearTimeout 使用。

       clearInterval():该方法只能清除由 setInterval 设置的定时操作

       clearTimeout():该方法只能清除由 setTimeout 设置的定时操作

   Location 对象
    Location 对象包含有关当前 URL 的信息。

    href:该属性可以完成通过 JS 代码控制页面的跳转

<html> 

   <head>   

    <meta charset="UTF-8"> 

     <title>location对象</title> 

      <script>   

       function tiao(){          window.location.href="http://www.itcast.cn";        }      </script> 

   </head> 

   <body>   

    <a href="#" onclick="tiao()">跳转到传智播客首页</a> 

   </body>

 </html> 

 

   History 对象
    History 对象包含用户(在浏览器窗口中)访问过的 URL。

    History 对象 方法:

      back():加载history列表中前一个URL。

      forword():加载history列表中下一个URL。

      go():加载history列表中的某个具体页面。

 

    历史页面:使用 location 页面(把 href 属性值改为当前的 history)

    History 页面代码: 

<input type="button" value=" 返回上一个页面" onclick="javascript:history.back()"/> 

 

    go(参数) 参数:-1 返回上一个历史记录页面;-2 返回上上一个历史记录页面,1 进入下一个历 史记录页面。

    让按钮点击失效: onclick=”javascript:volid(0)”

 

   Navigator 对象
    Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)

 

   Screen 对象
    Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)

 

 

 

今日概述:

ECMAScript
1.语法
2.变量:只能使用var定义,如果在函数的内容使用var定义,那么它是一个局部变量,如果没有使用var它是一个全局的。弱类型!
3.数据类型:原始数据类型(undefined/null/string/number/boolean)
4.语句:
5.运算符:==与===的区别
6.函数:两种写法(有命名称,匿名的)

 

BOM对象
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数),back(),forward()
location: href属性

 

事件:
onsubmit()此事件写在form标签中,必须有返回值。
onload()此事件只能写一次并且放到body标签中
其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)

 

获取元素:
document.getElementById("id")
获取元素里面的值:
document.getElementById("id").value


向页面输出
弹窗:alert();……
向浏览器中写入内容:document.write(内容);
向页面指定位置写入内容,innerHTML