大標題小標題備注

一、內置對象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>

谷歌瀏覽器上的打印信息：

---

總結

以上是生活随笔為你收集整理的js笔记（四）内置对象Math和Date()、浏览器对象模型BOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。