一、认识BOM模型
BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退
二、window中常用的属性和方法
window对象的常用属性
window.属性名= "属性值"
属性名称 说 明
history 有关客户访问过的URL的信息
location 有关当前 URL 的信息
示例
window.location.href="http://www.ynhxzy.cn" ;
history.back() 浏览器中的后退
history.forward() 浏览器中前进
常用方法
方法名称说 明
prompt( )显示可提示用户输入的对话框
alert( )显示带有一个提示信息和一个确定按钮的警示框
confirm( )显示一个带有提示信息、确定和取消按钮的对话框
close( )关闭浏览器窗口
open( )打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )在指定的毫秒数后调用函数或计算表达式
setInterval( )按照指定的周期（以毫秒计）来调用函数或表达式
注：
confirm()与alert ()、 prompt()区别
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
三、Document对象的常用方法
名称 说 明
getElementById()返回对拥有指定id的第一个对象的引用，对象的id唯一
getElementsByName()返回带有指定名称的对象的集合，相同name属性
getElementsByTagName()返回带有指定标签名的对象的集合，相同元素
write()向文档写文本、HTML表达式或JavaScript代码
四、javaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
示例1：点击按钮变换相应颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击按钮切换颜色</title>
</head>
<style>
.container{
width: 500px;
margin: 50px auto;
}
</style>
<body>
<div class="container">
<form action="#">
<p>本次选择的颜色是：<span id="color"></span></p>
<input type="button" onclick="selColor();" value="选择颜色">
</form>
</div>
</body>
<script>
function selColor(){
// 创建颜色值对象
var colorArray= new Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var colorValue= new Array("red","yellow","blue","green","orange","cyan","purple");
// 获取随机数用来做数组下标
var num=Math.ceil(Math.random()*7)-1;
//替换span标签里的内容，同时设置css样式
document.getElementById("color").innerText=colorArray[num];
// js动态改变html元素css样式
document.getElementById("color").style.color=colorValue[num];
document.getElementById("color").style.fontWeight="700";
}
</script>
</html>
示例2：制作时钟特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取当前系统时间</title>
</head>
<body>
<h1>你好，欢迎访问贵美商场！</h1>
<div id="myclock"></div>
<div id="countDown"></div>
</body>
<script>
function disptime(){
// 创建日期时间对象
var today=new Date();
var yy=today.getFullYear();
var M=today.getMonth()+1;
var dd=today.getDate();
var hh=today.getHours();
var ap="AM";
if(hh>12){
ap="PM";
}
hh =hh<10? '0'+ hh:hh;
var mm=today.getMinutes();
mm =mm<10? '0'+mm:mm;
var ss=today.getSeconds();
ss=ss<10? '0'+ss:ss;
// var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
// var xin=today.getDay();
document.getElementById("myclock").innerText=yy+"年"+M+"月"+dd+"日"+" "+hh+":"+mm+":"+ss+" "+ap+" ";
}
disptime();
// 1秒（1000毫秒）之后执行函数disptime()一次
// setTimeout("disptime() ",1000 );
setInterval("disptime()",1000);
function count(time){
var nowTime= +new Date(); //返回的是当前时间总的毫秒时间戳
var inputTime=+new Date(time); //返回的是用户输入当前时间总的毫秒时间戳
var times=(inputTime-nowTime)/1000;
var d=parseInt(times/60/60/24);//天
var h=parseInt(times/60/60%24);//时
var m=parseInt(times/60%60);//分
var s=parseInt(times%60);//秒
document.getElementById("countDown").innerText="距晚上6点倒计时："+d+"天"+h+"小时"+m+"分"+s+"秒";
}
setInterval("count('2021-8-13 18:00:00');",1000);
</script>
</html>