JavaScript操作BOM
BOM模型概述：
BOM一般是操作网页之间的操作，DOM是操作html等节点的操作
常见的BOM对象
浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：
- Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
- Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
- Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
- History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
- Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
BOM可以实现的功能：
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退
Windows对象
常用属性：
语法：
window.属性名= "属性值"
示例：
window.location="login.html" ;
常用方法：
三种输入框：
confirm()：弹出一个确认对话框
confirm()与alert ()、 prompt()区别：
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
示例：
var color=window.prompt("请输入颜色");
document.write(color);
window.alert("alert");
window.confirm("confirm");
prompt框：
alert框：
confirm框：
open()
语法：
window.open("弹出窗口的url","窗口名称","窗口特征”)
属性：
注意：有的浏览器取消了自动弹出拦截功能，需要手动打开！！
history对象
常用方法：
go()方法的值：
go()：可以用来跳转到指定的页面，它需要一个整数作为参数
- 1：表示向前跳转一个页面，相当于forward()
- 2：表示向前跳转两个页面
- -1：表示向后跳转一个页面，相当于back()
- -2：表示向后跳转两个页面
特点：
location对象：
Location对象中封装了浏览器的地址栏的信息，如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
常用方法和属性：
示例：
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
Document对象：
常用属性：
示例：
1.判断页面是否是链接进入
2.自动跳转到登录页面
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动
跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
常用方法：
使用方法参考：
innerHTML：
获取html节点的内容和标签，写入html标签时可以被识别为html元素：
读取：
<body>
<div id="myclock"><h1>innerHTML</h1></div>
</body>
<script >
var inner=document.getElementById("myclock");
console.log(inner.innerHTML);
</script>
可以看到输出<h1></h1>
写入：
<body>
<div id="myclock"></div>
</body>
<script >
document.getElementById("myclock").innerHTML ="<h1>innerHTML</h1>";
</script>
可以看到写入的html标签被识别
innerText：
写入的文本时会原样输出
读取的文本，只能读取到文本内容，不能读取标签
读取：
<body>
<div id="myclock"><h1>innerText</h1></div>
</body>
<script >
var inner=document.getElementById("myclock");
console.log(inner.innerText);
</script>
写入：
<body>
<div id="myclock"></div>
</body>
<script >
document.getElementById("myclock").innerText ="<h1>innerText</h1>";
</script>
JavaScript内置对象
Date：用于操作日期和时间
定义格式：
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
var today=new Date(); //返回当前日期和时间
var tdate=new Date("september 18,2022,14:58:12"); //设置时间
常用方法：
示例：
console.log("========操作时间=========")
var date = new Date();
console.log(date);
console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)
案例：
使用Date对象的方法显示当前时间的小时、分钟和秒
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();
发现制作的时钟特效示例中，时间不改变
由于时间在不停地走，所以应该每隔1秒调用显示时间的方法，需要配合定时函数使用：
定时函数：
setTimeout()
格式：
setTimeout("调用的函数",等待的毫秒数)
示例：
//1秒(1000毫秒)之后执行函数disptime()一次
var myTime＝setTimeout("disptime() ", 1000 );
案例：
三秒后提示
<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
var t=setTimeout("alert('3 seconds')",3000);
}
setInterval()
格式：
setInterval("调用的函数",间隔的毫秒数)
示例：
每隔1秒(1000毫秒)执行函数disptime()一次
var myTime＝setInterval("disptime() ", 1000 );
如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
两个定时函数的区别；
-
setTimeout()在等待指定时间后执行函数，且只执行一次；
-
setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，所以时钟例子使用setInterval();
清除函数：
clearTimeout()
格式：
clearTimeout(setTimeOut()返回的ID值)
示例：
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
clearInterval ()
格式：
clearInterval(setInterval()返回的ID值)
示例：
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
区别：
- clearTimeout()清除由setTimeout()设置的定时；
- clearInterval()清除由setInterval()设置的定时；
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
示例：
生成整数范围为2~99：
var iNum=Math.floor(Math.random()*98+2);
String：用于支持对字符串的处理
具体操作参考：
String对象的方法
Array：用于在单独的变量名中存储一系列的值
小结：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
