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

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