BOM是Browser Object Model的缩写,即浏览器对象模型,提供了独立于网页内容和浏览器窗口之间进行交互的APi。API由若干对象组成,由于浏览器是Javascript的宿主,因此,这些对象也称为宿主对象。
## 一、定时器--间隔调用和延迟调用
1、setInterval()和clearInterval()方法实现间隔调用(循坏调用)
setInterval(code,millisec[,"lang"]):按照指定的周期(以毫秒计)来调用函数或计算表达式,直到 clearInterval() 被调用或窗口被关闭。返回一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
code:必须,要调用的函数或要执行的代码串。调用函数传入函数名或者创建匿名函数。
millisec:必须,间隔调用的时间,以毫秒为单位。
lang:可选,用于定义传递给函数的任意数量的参数。
若要用clearInterval()方法取消setInterval()方法调用,就必须将setInterval的返回值赋给一个变量给clearInterval调用。
~~~
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#div1
{
width: 150px;
height: 125px;
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<div id="div1">
</div>
<button onclick="javascript:clearInterval(cancel)">
Stop interval</button>
<script type="text/javascript">
var iCount = 0;
var text = "setInterval()函数正在运行...";
var divText = "";
var oDiv = document.getElementById("div1");
function print () {
divText += text[iCount];
oDiv.innerHTML = divText;
iCount++;
}
var cancel = setInterval(print,1000);
</script>
</body>
</html>
~~~
结果:
![](https://box.kancloud.cn/2016-08-30_57c54ec964d1b.jpg)
![](https://box.kancloud.cn/2016-08-30_57c54ec97721d.jpg)
2、setTimeout()和clearTimeout()方法实现延迟调用
setTimeout(code,millisec):用于在指定的毫秒数后调用函数或计算表达式,只执行 code 一次,不循环调用,如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。参数同setInterval。
若要用clearTimeout()方法取消clearTimeout()方法调用,就必须将setTimeout()的返回值赋给一个变量给clearTimeout()调用。
~~~
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#div1
{
width: 150px;
height: 125px;
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<div id="div1">
2秒钟后出现其他内容
</div>
<button onclick="javascript:clearInterval(cancel)">
Stop interval</button>
<script type="text/javascript">
var text = "setTimeout()函数正在运行...";
var oDiv = document.getElementById("div1");
function print () {
oDiv.innerHTML = text;
}
var cancel = setTimeout(print,2000);
</script>
</body>
</html>
~~~
结果:
![](https://box.kancloud.cn/2016-08-30_57c54ec98954d.jpg)
![](https://box.kancloud.cn/2016-08-30_57c54ec99ce86.jpg)
3、强制清除:没有一个内建的方法可以一次清除所有的setInterval()或者setTimeout(),因此要采用循环清除:
for(var i = 0; i < 10; i++) clearTimeout(i);
## 二、基本的交互操作
1、alert(msg):警告对话框,msg是要显示的文本字符串,包含的HTML原样显示。
2、confirm(msg):确认对话框,参数同alert;方法返回TRUE(“确定”)或者FALSE(“取消)。
3、prompt(msg[,input]):提示输入消息对话框,msg同alert,input可选,定义在文本框中显示的信息,不定义input,则为空。prompt()方法以字符串或者整数返回用户输入的信息。按取消按钮返回null
4、showModalDialog(URL[,arg]);打开一个新窗口类型的对话框,可以加载一个网页(但是不能刷新)。URL是加载网页的URL地址,arg是传递给窗口的参数。部分浏览器默认阻止弹出这个窗口,需要设置允许弹出新窗口。该方法有返回值。
5、print():打印当前文档。
~~~
var returned = confirm("你是SB吗?");
if(returned)
{
document.write("你是SB<br/>");
}
else
{
document.write("你不是SB<br/>");
}
var value = prompt("你多少岁?",100);
document.write("你是"+value+"岁<br/>");
showModalDialog("http://blog.csdn.net/u011043843");
~~~
![](https://box.kancloud.cn/2016-08-30_57c54ec9b2616.jpg)
## 三、窗口交互操作
1、window.open():打开一个新的浏览器窗口或查找一个已命名的窗口。返回新窗口的引用。
![](https://box.kancloud.cn/2016-08-30_57c54ec9c882b.jpg)
features的可选值:
![](https://box.kancloud.cn/2016-08-30_57c54ec9dc21f.jpg)
~~~
<html>
<head>
<script type="text/javascript">
function open_win()
{
window.open("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type=button value="Open Window" onclick="open_win()" />
</body>
</html>
~~~
2、window.close([arg]):关闭窗口,arg是窗口的引用,未定义arg,则关闭当前窗口。
3、window.stop():取消文档的加载。
4、获取窗口引用:window[index] 或 window[name]:根据索引或者名称获取window对象,属性如下:
![](https://box.kancloud.cn/2016-08-30_57c54ec9efbee.jpg)
5、window.blur()和window.focus():分别使窗口失去焦点和获取焦点,并触发onblur和onfocus事件。
## 四、HTML5 中新增的几个属性
1、window.locationbar.visible:是一个布尔值,定义地址栏是否可见
2、window.menubar.visible:是一个布尔值,定义菜单栏是否可见
3、window.personalbar.visible:是一个布尔值,定义个人栏是否可见
4、window.scrollbars.visible:是一个布尔值,定义滚动栏是否可见
5、window.statusbar.visible:是一个布尔值,定义状态栏是否可见
6、window.toolbar.visible:是一个布尔值,定义工具栏是否可见
- 前言
- 一
- 二:变量
- 三:数据运算
- 四:流程控制
- 五:内建的全局函数
- 六:自定义函数
- 七:面向对象编程(OOP)
- 八:静态成员、静态类、枚举、重载和覆盖
- 九:原型链本质论
- 十:ECMAScript 5 增强的对象模型
- 十一:处理字符串---String类和正则表达式
- 十二:数组、多维数组和符合数组(哈希映射)
- 十三:处理日期和时间
- 十四:JavaScript内建类
- 十五:BOM之源---window对象
- 十六:BOM之源---BOM基本应用
- 十七:BOM新成就(1)--客户端存储数据(Storage实现)
- 十八:BOM新成就(1)--客户端存储数据(Web SQL DataBase实现)
- 十九--HTML5 DOM新标准---处理文档元信息和管理交互能力
- 二十---XMLHttpRequest和AJAX解决方案