版权声明:本文为博主自学期间所整理的文章,欢迎转载与分享,自学交流+V“zhangdonghui370” https://blog.csdn.net/sinat_34137390/article/details/81533647
什么是BOM
BOM(Browser Object Model)即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
(1)window对象
一、弹框的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 有返回值:如果点击确认返回true 如果点击取消 返回false
var res = confirm("您确认要删除吗?");
alert(res);
// 有返回值:如果点击确认返回输入框的文本 点击取消返回null
var res = prompt("请输入密码?");
alert(res);
// 没有返回值,返回undefined
var res = alert("xxx");
alert(res);
</script>
</head>
<body>
</body>
</html>
二、open方法:
重新打开一个窗口,流氓方法
window.open("url地址");
open("../jsCore/demo10.html");
三、定时器:
setTimeout(函数,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定时器的名称);
小例子递归测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 毫秒值
/*setTimeout(
function(){
alert("xx");
},
3000
);*/
// 递归循环演示,程序总不使用,有专门的方法使用interval
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);// 递归每2秒弹框
};
function closer(){
clearTimeout(timer);// 停止弹框
};
fn();
</script>
</head>
<body>
<input type="button" value="button" onclick="closer()">
</body>
</html>
setInterval(函数,毫秒值);
clearInterval(定时器的名称)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};
</script>
</head>
<body>
<input type="button" value="button" onclick="closer()">
</body>
</html>
需求:注册后5秒钟跳转首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>
</head>
<body>
恭喜您注册成功,<span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
</body>
</html>
四、location
location.href="url地址"; 点击跳转
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
对于Location对象,我们只需要掌握href这个属性就可以,它的作用是设置或返回完整的URL。
五、history
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="demo7.html">后一页</a>
<input type="button" value="上一页" onclick="history.go(-1)">
<input type="button" value="下一页" onclick="history.go(1)">
</body>
</html>