js笔记（四）内置对象Math和Date()、浏览器对象模型BOM

大标题	小标题	备注
一、内置对象`Math`、`Date()`	1. `Math` 数学对象; 2. `Date()` 日期对象;	常用的数学对象：`Math.PI`、`abs(n)`、`round(n)`、`random()`、`floor(n)`、`ceil(n)`、`pow(x,y)`、`sqrt(n)`、`min(3,4,5,6)`、`max()`、`sin(弧度)`、`cos()`、`tan()`；获取日期：`getFullYear()`、`getMonth()`、`getDate()`、`getDay()`、`getHours()`、`getMinutes()`、`getSeconds()`、`getMilliseconds`、`getTimes()`；设置日期：`setFullYear(2008)`、`setMonth(3)`、`setDate(2)`、`setHours(8)`、`setMinutes(8)`、`setSeconds()`、`setMilliseconds(666)`、`new Date("2008.8.8 10:30:23");`
二、浏览器对象模型BOM	1. window的方法; 2. window的事件; 3. window的子对象;	window的方法：`alert()`、`prompt()`、`confirm()`、`setInterval()`、`setTimeout()`、`open()`、`close()`； window的事件：`onload`、`onscroll`、`onresize()`； window的子对象：`history`、`location`、`navigator`

一、内置对象`Math`、`Date()`

存储数据的载体称为变量，在对象中称为属性；
功能实现的载体称为函数，在对象中称为方法；
当只操作对象进行编程的时候，称为“面向对象编程”。

1. `Math` 数学对象

Math 对象不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

常用的有：Math.PI、abs(n)、round(n)、random()、floor(n)、ceil(n)、pow(x,y)、sqrt(n)、min(3,4,5,6)、max()、sin(弧度)、cos()、tan()

console.dir(Math)，查看内置对象 Math 身上所有的方法。

（1）Math.PI，数学中的圆周率的值；

（2）abs(n)，取绝对值；

console.log(Math.abs(5));   //5
console.log(Math.abs(-5));  //5

（3）round(n)，四舍五入取整；

console.log(Math.round(4.3));  //4
console.log(Math.round(4.7));  //5
console.log(Math.round(-4.7));  //-5

（4）random()，随机；

//获取 a~b 之间的随机数
function random(a,b){return Math.round(Math.random()*(b-a) + a);
}

（5）floor(n)，向下取整；往小的整数取，效果与 parseInt() 对小数取整相同。

console.log(Math.floor(4.3));  //4
console.log(Math.floor(4.7));  //4
console.log(Math.floor(-2.1));  //-3
console.log(Math.floor(-2.9));  //-3

（6）ceil(n)，向上取整；往大的整数取。

console.log(Math.ceil(4.3));  //5
console.log(Math.ceil(4.7));  //5
console.log(Math.ceil(-2.1));  //-2
console.log(Math.ceil(-2.9));  //-2

（7）pow(x,y)，x 的 y 次方；

（8）sqrt(n)，n 的平方根；

（9）min(3,4,5,6)，取指定数字中的最小值，所有主要浏览器都支持 min() 方法。

不能接收数组；如果要检测数组，常用 Math.min.apply(null,[2,3,5])。
如果有某个参数为 NaN，或是不能转换成数字的非数字值，则返回 NaN。

（10）max() 取最大值；同 min()，不能接收数组；

（11）sin(弧度)、cos()、tan() 三角函数，角度转弧度：Math.PI /180*角度

var num = Math.PI /180*90; //90度的角度转弧度
console.log( Math.sin(num) ); //1

2. `Date()` 日期对象

1月	2月	3月	4月	5月	6月
January	February	March	April	May	June
7月	8月	9月	10月	11月	12月
July	August	September	October	November	December

与数学对象不同的是，日期对象不能直接使用，需要用 new 来创建。
var d = new Date();
console.log(d); //Tue Oct 08 2019 14:00:33 GMT+0800 (中国标准时间)
打印出来的结果就是“标准时间格式”。

（1）获取时间的方法 - get系列
① getFullYear()，获取年；
② getMonth()，获取月，月是从 0 开始，0-11；
③ getDate()，获取日；
④ getDay()，星期几，0-6，0 是星期天；
⑤ getHours()，小时，24小时制；
⑥ getMinutes()，分；
⑦ getSeconds()，秒；
⑧ getMilliseconds，毫秒；
⑨ getTime()，获取时间戳，从1970.1.1 0:0:0 到此时此刻的毫秒数；

var d = new Date();
console.log(d);
console.log("年",d.getFullYear());
console.log("月",d.getMonth());
console.log("日",d.getDate());
console.log("星期",d.getDay());
console.log("时",d.getHours());
console.log("分",d.getMinutes());
console.log("秒",d.getSeconds());
console.log("毫秒",d.getMilliseconds());
console.log("时间戳",d.getTime());

在这里插入图片描述

（2）设置时间的方法 - set系列

方法1：逐个设置：
① setFullYear(2008)，设置年份；设置2008年
② setMonth(3)，设置月份，超过11会往前进一年；设置4月
③ setDate(2)，设置日；设置2日/号
④ setHours(8)，设置时；设置08时
⑤ setMinutes(8)，设置分；设置08分
⑥ setSeconds(20)，设置秒；设置20秒
⑦ setMilliseconds(666)，设置毫秒；
方法二：设置时间戳：
setTime(时间戳)，用设置时间戳的方式设置日期；时间戳与上面的时间同时设置，会产生冲突。
方法三：构造函数的方式设置：
① 一个参数：var d = new Date("2008.8.8 10:30:23");，未设置部分会归零。打印结果为：Fri Aug 08 2008 10:30:23 GMT+0800 (中国标准时间)
② 多个参数：var d = new Date(2008,8,8,10,30,23);，这里的月份d.getMonth()得到的是9月；打印结果为：Mon Sep 08 2008 10:30:23 GMT+0800 (中国标准时间)

（3）注意：

秒 = 毫秒*1000；

两个标准格式的日期（new 出来的日期对象）可以直接相减，得到的是毫秒数。这个毫秒数与他们两个日期的时间戳相减得到的值是相等的。

var d = new Date();
console.log(d);     //Mon Mar 01 2021 16:41:47 GMT+0800 (中国标准时间)
var old = new Date("1970.1.1 0:0:0");
console.log(d - old);  //1614616907645
console.log(d.getTime());  //1614616907645

（4）案例：计算出今天距离1937年12月13日10:01:00过去了多少天、小时、分钟？

var d = new Date();
console.log(d);  //Tue Mar 02 2021 15:44:24 GMT+0800 (中国标准时间)
var oldDate = new Date("1937.12.13 10:01:00");
var second = d.getTime() - oldDate.getTime();  //与var second=d-oldDate;得到的值相等
var times = second/1000/60/60/24;
var day = parseInt(times);
var h = parseInt( (times - day)*24 );
var minute = parseInt( ((times - day)*24 - h)*60 );
console.log(day +"天"+ h +"时"+ minute +"分"); //30395天5时43分

二、浏览器对象模型BOM

BOM（Browser Object Model）浏览器对象模型，抽象出一个对象，把浏览器的所有的信息和操作，都放在了这个对象中，这个对象就是 window。

BOM 提供了独立于内容而与浏览器窗口进行交互的对象。

2.1 window的方法：

alert();、prompt();、confirm();、setInterval()、setTimeout()、open()、closed()…更多查看菜鸟教程。

1. `alert();`，弹出信息框；

在这里插入图片描述

2. `prompt();` 弹出对话框；

输入的信息保存到返回值中。取消返回：null；

var a = prompt("你好");
console.log(a);//点击确定返回： 输入框输入的值//点击取消返回： null

在这里插入图片描述

3. `confirm();`，弹出选择框；

返回 Boolean 值，点击确定：true，点击取消：false。

var b = confirm("你好");
console.log(b);//点击确定： true   点击取消： false

在这里插入图片描述

4. 计时器：`setInterval()`

（1）参数1： callback，回调函数；参数2：时间，毫秒数；

（2）使用：

setInterval(function(){
//操作
},1000)

（3）计时器（也包括延时器）的返回值是当前计时器的顺序（从 1 开始），且是唯一的；

var t1 = setInterval(function(){console.log("I");
})
var t2 = setInterval(function(){console.log("love");
})
var t3 = setTimeout(function(){console.log("you");
})console.log(t1); //1
console.log(t2); //2
console.log(t3); //3

（4）清除计时器：clearInterval(计时器名称);
清除计时器时，清除的是计时器的返回值；

通过一个事件开启一个计时器，建议在操作代码第一行清除该计时器，阻止用户多次操作时会多次调用该计时器。
```
var time;
time = setInterval(functiong(){clearInterval(time);
//操作
},1000);
clearInterval(time);
```

5. 延时器： `setTimeout()`

（1）参数1： callback，函数；参数2：时间，毫秒数；
（2）与计时器的区别：延时器只执行一次 callback 函数；
（3）清除延时器：clearTimeout(延时器名称);

6. `open(url,name,feature,replace)`，打开一个新的浏览器窗口或查找一个已命名的窗口；

具体讲解及在线案例
（1）url：可选，要在新窗口中显示的文档的url，如果没有指定URL，会打开一个新的空白窗口；
（2）name：可选，指定 target 属性或声明新窗口的名称；

"_blank"，默认，url 加载到一个新的窗口；
"_parent"，url 加载到父框架；
"_self"，url 替换当前页面；
"_top"，url 替换任何可加载的框架集；
"自定义窗口名称"，窗口名称；

（3）feature：可选，一个逗号分隔的项目列表；
（4）replace，通常省略。

window.open("http://www.runoob.com");
window.open('','','width=200,height=100');

7. `close();`，关闭浏览器窗口。；

所有主要浏览器（ie9及以上）都支持 close() 属性，该方法通常是用来关闭 open() 打开的浏览器。具体案例
使用：window.close()

2.2 window的事件

1. `onload;`，会在页面或图像加载完成后立即发生；参考

（1）适用场景：该方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
（2） 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。
（3）使用原因：因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出 "undefined" 错误。

2. `onscroll;`，滚动触发的事件

window.onscroll = function(){console.log(1);
}

3. `onresize`，改变页面大小时会触发

每次改变浏览器窗口的时候 onresize 事件都会触发两次时：

解决方法：setTimeout()；

function windowResizeEvent(callback) {window.onresize = function() {var target = this;if (target.resizeFlag) {clearTimeout(target.resizeFlag);}target.resizeFlag = setTimeout(function() {callback();target.resizeFlag = null;}, 100);}
}

2.3 window的子对象

history： 代表用户（在浏览器窗口中）访问过的 URL，即浏览器的历史记录；
location： 代表有关当前 URL 的信息，简单来说就是地址栏的信息；
navigator： 代表有关浏览器的信息：当前版本、内核、浏览器名字，浏览器的操作系统；

1. `history` 具体文档

（1）history.length;，返回历史记录的数量；
（2）history.back();，后退；
（3）history.forward();，前进；
（4）history.go(n);，后退（或前进）几步； n=0,刷新；n=负数，后退；n=正数，前进；

2. `location` 具体文档

（1）location 对象的一些主要属性：

① location.hash：锚点连接，地址栏上的地址 “#”及其后面的部分；
```
location.hash = "#6"
```
② location.host：一个URL的主机名和端口；

③ location.href：整个 url；

//获取当前页面的url
console.log(location.href);//跳转
location.href = "https://www.baidu.com/";

④ location.pathname： URL路径名；
⑤ location.serach：查询字段，’?’ 及其后面的部分；可以改变 url 中的查询字段；

（2）location 对象的方法：
① location.assign(url);，载入一个新的文档；

相当于跳转，可以使用浏览器上的后退，后退到载入新文档前的那个页面。

② location.reload()：强迫浏览器刷新当前页面，可以传参，参数默认为 false；

false：从客户端缓存里取当前页再刷新； ture：绕过缓存，从服务器上重新下载该文档，相当于浏览器上的清空缓存刷新；
reload() 方法效果和 history.go(0) 相同，都是类似浏览器上的刷新按钮；

③ location.replace(url);，用一个新文档取代当前文档。具体文档及案例

用新 url 的文档替换当前文档后，在历史记录中没有被取代的这条文档，它被新 url 的文档给替换掉了。

3. `navigator` 具体文档

（1）navigator.appName;，返回当前浏览器的名称；
（2）navigator.appVersion;，返回当前浏览器的版本号；
（3）navigator.platform;，返回当前计算机的操作系统；
（4）navigator.userAgent;，代替上面3个方法；

<script>console.log(navigator.appName);console.log(navigator.appVersion);console.log(navigator.platform);console.log(navigator.userAgent);
</script>

谷歌浏览器上的打印信息：