目录：
1.BOM介绍
* JavaScript分三部分
- ECMAScript标准:JS的基本语法
- DOM：Document object Model 文档对象模型--操作页面的元素
- BOM：Browser Object Model 浏览器对象模型--操作的是浏览器
* 浏览器中有个*对象：window
页面中*对象：document，页面中所有的内容都是属于浏览器的，页面中的内容也都是window的
* window是浏览器的*对象，当调用window下的属性和方法时，可以省略window
* console.log(window.name);//注意，输出空，而不是undefined。所以，通常不要用name定义变量名。
* 可以用top代替window
2.系统对话框
* window.alert("您好");//样式不能修改，生产不用，测试的时候用
* window.prompt("请输入：");//样式不能修改，生产不用，测试的时候用
* window.confirm("确定退出吗");//点确定返回true，生产不用
3.页面加载事件
* 页面加载完毕后触发
window.onload = function(){};
* window.onunload = function() {};
页面关闭后触发的事件，谷歌不支持，IE8支持
* window.onbeforeunload = fn;
页面关闭之前触发的事件，谷歌不支持，IE8支持
4.location对象
* console.log(window.location); // 查看location的属性
* location.href="http://www.baidu.com"; // 有历史记录
* location.assign("http://www.baidu.com");
* location.reload(); // 刷新
* location.replace("url"); // 将当期页面用"url"替换，没有历史记录
5.history对象
* 前进 window.history.forword();
* 后退 window.history.back();
* window.history.go(数字)正数前进，负数后台
* 一般不用。了解即可。
* 案例：模拟浏览器的前进和后退
// 页面1：111.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <div> <input type="button" id="btn1" value="跳转"/> <input type="button" id="btn2" value="前进"/> </div> <script type="text/javascript"> document.getElementById("btn2").onclick=function(){ history.forward(); }; document.getElementById("btn1").onclick=function(){ location.href="222.html"; }; </script> </body> </html> // 页面二：222.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" id="btn" value="后退"/> </body> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ history.back(); }; </script> </html>
6.navigator对象
* navigator.userAgent; // 判断用户浏览器的类型
- Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
* navigator.platform; // 判断浏览器所在的系统平台类型
- Win64
7.定时器setInterval
* var id = window.setInterval(fn,time)
- time:单位毫秒
- 返回值：定时器id
- 功能：每time时间执行一次fn函数
* 停止定时器
window.clearInterval(定时器id)
<div>
<input type="button" id="btn1" value="开启定时器"/>
<input type="button" id="btn2" value="去除定时器"/>
</div>
<script type="text/javascript">
var _id;
document.getElementById("btn1").onclick=function(){
var id = setInterval(function(){
alert("hello");
_id = id;
},3000);
};
document.getElementById("btn2").onclick=function(){
clearInterval(_id);
};
</script>
8.案例：图片摇摆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn1" value="摇摆起来"/>
<input type="button" id="btn2" value="停止摇摆"/>
<div><img id="imgId" src="uu.jpg" style="position: absolute;width: 300px"/></div>
<script type="text/javascript">
var _id;//用于保存定时器的返回值
var x=-300;//定义图片初始的横坐标v
//点击按钮，图片开始进入屏幕
document.getElementById("btn1").onclick=function(){
var id = setInterval(function(){
var img = document.getElementById("imgId");
if(x > 1500){ //图片出去后停止定时器
clearInterval(_id);
}else{
x += 10;
}
console.log(x);
img.style.left = x + "px";
_id = id;
},20);
};
//停止定时器
document.getElementById("btn2").onclick = function(){
clearInterval(_id);
};
</script>
</body>
</html>
9.案例：一闪一闪亮晶晶
注意：有问题，如果多次点击按钮"摇摆起来",就无法停止摇摆了；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
div{
width: 600px;
height: 500px;
background-color: black;
position: relative;
}
span{
font-size: 30px;
color: yellow;
position: absolute;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="摇摆起来"/>
<input type="button" id="btn2" value="停止摇摆"/>
<div id="box"></div>
<script type="text/javascript">
var id;
//点击按钮，图片开始进入屏幕
document.getElementById("btn1").onclick=function(){
var div = document.getElementById("box");
div.innerHTML="<span>☆</span>";
id = setInterval(function(){
div.firstElementChild.style.left = parseInt(Math.random()*580+1) + "px";
div.firstElementChild.style.top = parseInt(Math.random()*480+1) + "px";
},100);
};
//停止定时器
document.getElementById("btn2").onclick=function(){
clearInterval(id);
};
</script>
</body>
</html>