js02 案例驱动1 定时弹出广告 Brower对象

案例1-定时弹出广告
需求:
打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示.
技术分析:
定时器
定时器(BOM（浏览器对象模型）-window对象)
setInterval(code,毫秒数):周期执行 

code	必需。要调用的函数或要执行的代码串。

setTimeout(code,毫秒数):延迟多长事件后 只执行一次.

清除定时器
clearInterval(id):  由 setInterval() 返回的 ID 值。
clearTimeout(id):
步骤分析:
1.确定事件  
2.编写函数
a.获取元素
b.操作元素
////////////////////////
1.html页面,先把广告隐藏

<div id="ad" style="100%;display: none;">
<img src="../img/ad_.jpg" width="100%" />
</div>

2.页面加载成功事件 onload

onload=function(){
//设置定时器 间隔4秒后展示图片
timer=setInterval(showAd,4000);  代码串
}

3.编写函数

function showAd(){
//展示的次数加1
i++;

//若i=3 清空由setinterval设置的定时器
if(i==3){
clearInterval(timer);
}

//1.获取广告
var divObj=document.getElementById("ad");

//2.修改广告的样式 将其显示
divObj.style.display="block";

//3.2秒之后隐藏 只执行一次
setTimeout(hideAd,2000); hideAd（） 2秒后 要执行的方法

}

定时器:
操作元素:
document.getElementById("")
操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可
注意:
只要是window对象的属性和方法,可以把window省略

Window 对象表示浏览器中打开的窗口。

window.onload 等价于 onload
window.setInterval() 等价于 setInterval()
////////////////////
bom(浏览器对象模型)总结
所有的浏览器都有5个对象
window 浏览器:窗口  整个浏览器
location:定位信息 (地址栏)

history:历史

history.go(1) ：前进

history.go(-1) ：后退

window对象详解:
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
并为每个框架创建一个额外的 window 对象。
常用的属性:
通过window可以获取其他的四个对象
window.location 等价域 location
window.history 等价于 history
...
常用的方法
消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
定时器
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.

例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);

清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url):打开
close():关闭
/////////////////////////
location:定位信息
常用属性:
href:获取或者设置当前页面的url(定位信息)

location.href; 获取url

location.href="...";设置url 相当于 a标签

//设置url
function setUrl(){
　　　　location.href="http://www.baidu.com";

}

<a href="javascript:void(0)" onclick="setUrl()" >跳转</a>
//////////////////////
history:历史
back();后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()
//////////////////////////////////////