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