目录
简单介绍
BOM（Browser Object Model）允许 JavaScript 与浏览器对话。 不存在浏览器对象模型（BOM）的官方标准。 现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性。
"window" 对象
有浏览器都支持 "window" 对象，它代表浏览器的窗口。
所有全局 JavaScript 对象、函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性。
窗口尺寸、方法
window 对象的两个属性以像素返回浏览器窗口（视口）的尺寸，但不包括工具栏和滚动条：
window.innerHeight 浏览器窗口的内高度（以像素计）
window.innerWidth 浏览器窗口的内宽度（以像素计）
其他窗口方法，例如：
window.open() 打开新窗口
window.close() 关闭当前窗口
window.moveTo() 移动当前窗口
window.resizeTo() 重新调整当前窗口
“screen”对象
window.screen 对象包含用户屏幕的信息，可以不带 window 前缀。
screen.width 属性返回以像素计的屏幕宽度，实例：
document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;
screen.height 属性返回以像素计的屏幕高度，实例：
document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;
screen.availWidth 属性返回屏幕宽度，以像素计，减去诸如窗口工具条之类的界面特征。
screen.availHeight 属性返回屏幕高度，以像素计，减去诸如窗口工具条之类的界面特征。
“location”对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
属性和方法
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.href属性返回当前页面的 URL。
实例
<script>
document.write(location.href);
</script>location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
“navigator” 对象
window.navigator 对象在编写时可不使用 window 这个前缀。
注意：由于navigator 数据可被浏览器使用者更改、一些浏览器对测试站点会识别错误、浏览器无法报告晚于浏览器发布的新操作系统，来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本。由于不同的浏览器支持不同的对象，可以使用对象来检测浏览器。
“history” 对象
window.history 对象包含浏览历史，可以不带 window 书写，一些方法：
history.back() 等同于在浏览器中点击后退按钮
history.forward() 等同于在浏览器中点击前进按钮
实例
<html>
<head>
<script>
function Back() {
history.back();
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="Back()">
</body>
</html>JavaScript 弹出框：警告框
如果要确保信息传递给用户，通常会使用警告框。
当警告框弹出时，用户将需要单击“确定”来继续。
语法（可以不带 window 前缀）：
window.alert("sometext");
实例
部分代码
alert("我是一个警告框！");
JavaScript 弹出框：确认框
如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法(可以不带 window 前缀) ：
window.confirm("sometext");
实例
部分代码
var r = confirm("我是一个确认框:");
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}
JavaScript 弹出框：提示框
如果希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。若用户单击“取消”，该框返回 NULL。
语法(可以不带 window 前缀)：
window.prompt("tipText", "defaultText");
实例
部分代码
var result = prompt("用户性别:", "男");
if (result != null) {
document.getElementById("demo").innerHTML
= "您填写的性别是:" + result ;
}
定时执行操作
window 对象允许以指定的时间间隔定时执行代码，相关方法(可以不带window前缀)： setTimeout(function, milliseconds) 等待指定的毫秒数后执行函数。 clearTimeout(timeoutVariable) 停止执行 setTimeout() 中规定的函数。 setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数。 clearInterval(timerVariable) 停止执行 setInterval() 中指定的函数。
实例
部分代码
<p id="demo"></p>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
<button onclick="clearInterval(myVar)">停止时间</button>
效果
使用 JavaScript 创建 HTML 动画
创建动画容器、动画元素
部分代码
#container{
width:400px;
height:400px;
position:relative;
background:yellow;
}
#animate{
width:50px;
height:50px;
position:absolute;
background:red;
}<div id="container">
<div id="animate">动画元素</div>
</div>
<button onclick="myMove()">单击我</button>
编写动画代码
部分代码
function myMove(){
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame,5);
function frame(){
if(pos == 350){
clearInterval(id);
}
else{
pos++;
elem.style.top = pos+'px';
elem.style.left = pos+'px';
}
}
}
效果
点击按钮后红色盒子向右下角移动，移动到黄色盒子底部停止。
应用实例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>
滚动字幕
</title>
<style>
.bigbox{
height:570px;
width:300px;
border-style:soild;
border-width:1px;
z-index:-1;
margin:0px 400px 100px 200px;
background-color:lightblue;
overflow:hidden;
}
.smallbox{
height:568px;
width:300px;
border-style:soild;
border-width:1px;
background-color:orange;
z-index:1;
margin:2px 0px 0px 0px;
overflow:hidden;
}
p{
font-family:'新宋体';
font-size:16px;
}
</style>
</head>
<body>
<script>
function move(){
var elem=document.getElementById('animate');
var pos=0;
var ele=document.getElementById('text');
var id=setInterval(function frame(){
if(pos == -570){
clearInterval(id);
console.log('stop');
}
else{
pos--;
elem.style.marginTop=pos+'px';
}
},20);
}
</script>
<button onclick="move()">单击我</button>
<div class="bigbox">
<div class="smallbox" id="animate">
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.1b7596cb4da7478578dbd49ce81acc3b? rik=HDeMOkTauC5f7w&riu=http%3a%2f%2fs1.cdn.xiachufang.com%2ff8658b1c8bb311e6a9a10242ac110002_1620w_1620h.jpg%402o_50sh_1pr_1l_660w_90q_1wh&ehk=Kq%2f%2f1F2uK6B0BAr%2fHYiKH5U0RXMnz8ecyE9FZgO7rQY%3d&risl=&pid=ImgRaw&r=0"/>
</div>
<div>
<p>
食材明细
<br>
主料：鸡翅中（适量）
<br>
辅料：可乐（一听）
<br>
配料
<br>
八角（适量）
<br>
姜（适量）
<br>
葱段（适量）
<br>
料酒（适量）
<br>
口味：甜味
<br>
工艺：炸
<br>
耗时：半小时
<br>
难度：普通
<br>
可乐鸡翅的做法步骤
<br>
1材料：鸡翅中、可乐一听、八角、姜、葱段、料酒
<br>
2鸡翅洗净，入葱姜水中煮沸捞出，沥干水份。
<br>
3锅内放少许油烧热，放入鸡翅。
<br>
4煎至外皮两面泛黄。
<br>
5倒入可乐没过鸡翅即可。
<br>
6加入酱油、大料、葱段、姜片，大火烧开后转小火。
<br>
7炖至汤汁浓稠即可。
</p>
</div>
</div>
</body>
</html>效果
点击前
点击后
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
