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>

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

---