當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript知识笔记（三）——内置对象、浏览器对象

發(fā)布時(shí)間：2023/11/30 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript知识笔记（三）——内置对象、浏览器对象小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

內(nèi)置對(duì)象：

（與Java很像）

JavaScript 中的所有事物都是對(duì)象，如:字符串、數(shù)值、數(shù)組、函數(shù)等，每個(gè)對(duì)象帶有屬性和方法。

對(duì)象的屬性：反映該對(duì)象某些特定的性質(zhì)的，如：字符串的長(zhǎng)度、圖像的長(zhǎng)寬等；

對(duì)象的方法：能夠在對(duì)象上執(zhí)行的動(dòng)作。例如，表單的“提交”(Submit)，時(shí)間的“獲取”(getYear)等；

JavaScript 提供多個(gè)內(nèi)建對(duì)象，比如 String、Date、Array 等等，使用對(duì)象前先定義，如下使用數(shù)組對(duì)象：

var objectName =new Array();//使用new關(guān)鍵字定義對(duì)象或者var objectName =[];

訪問(wèn)對(duì)象屬性的語(yǔ)法:

objectName.propertyName

如使用 Array 對(duì)象的 length 屬性來(lái)獲得數(shù)組的長(zhǎng)度：

var myarray=new Array(6);//定義數(shù)組對(duì)象 var myl=myarray.length;//訪問(wèn)數(shù)組長(zhǎng)度length屬性

以上代碼執(zhí)行后，myl的值將是：6

訪問(wèn)對(duì)象的方法：

objectName.methodName()

如使用string 對(duì)象的 toUpperCase() 方法來(lái)將文本轉(zhuǎn)換為大寫：

var mystr="Hello world!";//創(chuàng)建一個(gè)字符串 var request=mystr.toUpperCase(); //使用字符串對(duì)象方法

? ?以上代碼執(zhí)行后，request的值是：HELLO WORLD!

? ? Date 日期對(duì)象

日期對(duì)象可以儲(chǔ)存任意一個(gè)日期，并且可以精確到毫秒數(shù)（1/1000 秒）。

定義一個(gè)時(shí)間對(duì)象?:

var Udate=new Date();

注意:使用關(guān)鍵字new，Date()的首字母必須大寫。?

使 Udate 成為日期對(duì)象，并且已有初始值：當(dāng)前時(shí)間(當(dāng)前電腦系統(tǒng)時(shí)間)。

如果要自定義初始值，可以用以下方法：

var d = new Date(2012, 10, 1); //2012年10月1日 var d = new Date('Oct 1, 2012'); //2012年10月1日

我們最好使用下面介紹的“方法”來(lái)嚴(yán)格定義時(shí)間。

訪問(wèn)方法語(yǔ)法：“<日期對(duì)象>.<方法>”

Date對(duì)象中處理時(shí)間和日期的常用方法：

? 返回/設(shè)置年份方法

get/setFullYear()?返回/設(shè)置年份，用四位數(shù)表示。

var mydate=new Date();//當(dāng)前時(shí)間2015年4月28日 document.write(mydate+"<br>");//輸出當(dāng)前時(shí)間 document.write(mydate.getFullYear()+"<br>");//輸出當(dāng)前年份 mydate.setFullYear(91); //設(shè)置年份 document.write(mydate+"<br>"); //輸出年份被設(shè)定為 0091年。

注意:不同瀏覽器，時(shí)間格式有差異，?mydate.setFullYear(91)結(jié)果不同，年份被設(shè)定為 0091或91兩種情況。

返回星期方法

getDay()?返回星期，返回的是0-6的數(shù)字，0 表示星期天。如果要返回相對(duì)應(yīng)“星期”，通過(guò)數(shù)組完成，代碼如下:

注意：以上代碼是在2015年4月28日，星期二運(yùn)行。

結(jié)果:

今天是：星期二

返回/設(shè)置時(shí)間方法

get/setTime()?返回/設(shè)置時(shí)間，單位毫秒數(shù)，計(jì)算從 1970 年 1 月 1 日零時(shí)到日期對(duì)象所指的日期的毫秒數(shù)。

如果將目前日期對(duì)象的時(shí)間推遲1小時(shí)，代碼如下:

結(jié)果:

當(dāng)前時(shí)間：當(dāng)前時(shí)間：Tue Apr 28 2015 17:14:41 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

推遲一小時(shí)時(shí)間：Tue Apr 28 2015 18:14:41 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

注意:1. 一小時(shí) 60 分，一分 60 秒，一秒 1000 毫秒

?? ???2. 時(shí)間推遲 1 小時(shí),就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”

? ?String 字符串對(duì)象

定義字符串的方法就是直接賦值。比如：

var mystr = "I love JavaScript!"

定義mystr字符串后，就可以訪問(wèn)它的屬性和方法。

訪問(wèn)字符串對(duì)象的屬性length:

stringObject.length;?返回該字符串的長(zhǎng)度。

var mystr="Hello World!"; var myl=mystr.length;

以上代碼執(zhí)行后，myl 的值將是：12

訪問(wèn)字符串對(duì)象的方法：

使用 String 對(duì)象的 toUpperCase() 方法來(lái)將字符串小寫字母轉(zhuǎn)換為大寫：

var mystr="Hello world!"; var mynum=mystr.toUpperCase(); 以上代碼執(zhí)行后，mynum 的值是：HELLO WORLD!

返回指定位置的字符

charAt() 方法可返回指定位置的字符。返回的字符是長(zhǎng)度為 1 的字符串。

語(yǔ)法:

stringObject.charAt(index)

參數(shù)說(shuō)明：

注意：1.字符串中第一個(gè)字符的下標(biāo)是 0。最后一個(gè)字符的下標(biāo)為字符串長(zhǎng)度減一（string.length-1）。

? ? ? ? ? 2.如果參數(shù) index 不在 0 與 string.length-1 之間，該方法將返回一個(gè)空字符串。

如:在字符串 "I love JavaScript!" 中，返回位置2的字符：

注意：一個(gè)空格也算一個(gè)字符。

以上代碼的運(yùn)行結(jié)果：

返回指定的字符串首次出現(xiàn)的位置

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。

語(yǔ)法

stringObject.indexOf(substring, startpos)

參數(shù)說(shuō)明：

說(shuō)明：

1.該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 substring。

2.可選參數(shù)，從stringObject的startpos位置開(kāi)始查找substring，如果沒(méi)有此參數(shù)將從stringObject的開(kāi)始位置查找。

3.如果找到一個(gè) substring，則返回 substring 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開(kāi)始的。

注意：1.indexOf() 方法區(qū)分大小寫。

2.如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1。

例如: 對(duì) "I love JavaScript!" 字符串內(nèi)進(jìn)行不同的檢索：

以上代碼的輸出：

0 4 9

字符串分割split()

split() 方法將字符串分割為字符串?dāng)?shù)組，并返回此數(shù)組。

語(yǔ)法：

stringObject.split(separator,limit)

參數(shù)說(shuō)明:

注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個(gè)字符之間都會(huì)被分割。

我們將按照不同的方式來(lái)分割字符串：

使用指定符號(hào)分割字符串，代碼如下:

var mystr = "www.imooc.com"; document.write(mystr.split(".")+"<br>"); document.write(mystr.split(".", 2)+"<br>");

運(yùn)行結(jié)果:

www,imooc,com www,imooc

將字符串分割為字符，代碼如下：

document.write(mystr.split("")+"<br>");//把字符串分割成字符 document.write(mystr.split("", 5));//把字符串分割成字符，只取分割得出的前面5個(gè)

運(yùn)行結(jié)果:

w,w,w,.,i,m,o,o,c,.,c,o,m w,w,w,.,i

提取字符串substring()

substring()方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。

語(yǔ)法:

stringObject.substring(starPos,stopPos)?

參數(shù)說(shuō)明:

注意：

1. 返回的內(nèi)容是從?start開(kāi)始(包含start位置的字符)到?stop-1 處的所有字符，其長(zhǎng)度為?stop?減start。

2. 如果參數(shù)?start?與?stop?相等，那么該方法返回的就是一個(gè)空串（即長(zhǎng)度為 0 的字符串）。

3. 如果?start?比?stop?大，那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)。

使用 substring() 從字符串中提取字符串，代碼如下：

運(yùn)行結(jié)果:

JavaScript love

提取指定數(shù)目的字符substr()

substr() 方法從字符串中提取從 startPos位置開(kāi)始的指定數(shù)目的字符串。

語(yǔ)法:

stringObject.substr(startPos,length)

參數(shù)說(shuō)明:

注意：如果參數(shù)startPos是負(fù)數(shù)，從字符串的尾部開(kāi)始算起的位置。也就是說(shuō)，-1 指字符串中最后一個(gè)字符，-2 指倒數(shù)第二個(gè)字符，以此類推。

如果startPos為負(fù)數(shù)且絕對(duì)值大于字符串長(zhǎng)度，startPos為0。

使用 substr() 從字符串中提取一些字符，代碼如下：

運(yùn)行結(jié)果：

JavaScript! love

JS中substr和substring的用法和區(qū)別

substr 和 substring都是JS 截取字符串函數(shù),兩者用法很相近,下面是兩者的語(yǔ)法很示例:

一、substr 方法

返回一個(gè)從指定位置開(kāi)始的指定長(zhǎng)度的子字符串。
? ? ? string.substr(start [, length ])

注意:?length可選項(xiàng)。如?length 為 0 或負(fù)數(shù)，將返回一個(gè)空字符串。如果沒(méi)有指定該參數(shù)，則子字符串到 string 的最后。

二、substring 方法

返回位于 String 對(duì)象中指定位置的子字符串。
? ? ? ?string.substring(start, end)

注意:

substring 方法將返回一個(gè)包含從 start 到最后（不包含 end ）的子字符串的字符串。

三、示例代碼

var str = "I love JS!";// 有一個(gè)str字符串，如想獲取JS子字符串，用兩種方法如何實(shí)現(xiàn)。
? ? ? ?str.substr(7, 2); // 獲取子字符串。

str.substring(7, 9);?// 獲取子字符串。

結(jié)果: ?JS

區(qū)別:第二參數(shù)，substr第二個(gè)參數(shù)是獲取子字符串的長(zhǎng)度，substring第二個(gè)參數(shù)是獲取子字符串的結(jié)束位置。

四、注意事項(xiàng)

substr和substring兩個(gè)函數(shù)截取帶有空格的字符串后的長(zhǎng)度是每個(gè)空格算一個(gè)字符長(zhǎng)度。例如：

? ? var a = "I am imooc!";

? ? a.substring(0, 5).length的值是5，而不是4，但alert(a.substring(0, 5));的值卻是I am ，這樣在做alert("I am" == a.substring(0, 5));的時(shí)候就是false了，alert("I am" == a.substring(0, 4));才是true。

Math對(duì)象

Math對(duì)象，提供對(duì)數(shù)據(jù)的數(shù)學(xué)計(jì)算。

使用 Math 的屬性和方法，代碼如下：

運(yùn)行結(jié)果:

3.141592653589793 15

注意：Math 對(duì)象是一個(gè)固有的對(duì)象，無(wú)需創(chuàng)建它，直接把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法。這是它與Date,String對(duì)象的區(qū)別。

Math 對(duì)象屬性

Math 對(duì)象方法

向上取整ceil()

ceil() 方法可對(duì)一個(gè)數(shù)進(jìn)行向上取整。

語(yǔ)法:

Math.ceil(x)

參數(shù)說(shuō)明:

注意：它返回的是大于或等于x，并且與x最接近的整數(shù)。

我們將把 ceil() 方法運(yùn)用到不同的數(shù)字上，代碼如下：

運(yùn)行結(jié)果：

1 7 5 4 -5 -5

向下取整floor()

floor() 方法可對(duì)一個(gè)數(shù)進(jìn)行向下取整。

語(yǔ)法:

Math.floor(x)

參數(shù)說(shuō)明：

注意：返回的是小于或等于x，并且與x最接近的整數(shù)。

我們將在不同的數(shù)字上使用 floor() 方法，代碼如下:

運(yùn)行結(jié)果：

0 6 5 3 -6 -6

?四舍五入round()

round() 方法可把一個(gè)數(shù)字四舍五入為最接近的整數(shù)。

語(yǔ)法:

Math.round(x)

參數(shù)說(shuō)明：

注意：

1. 返回與 x 最接近的整數(shù)。

2. 對(duì)于 0.5，該方法將進(jìn)行上舍入。(5.5 將舍入為 6)

3.?如果?x 與兩側(cè)整數(shù)同等接近，則結(jié)果接近 +∞方向的數(shù)字值。(如?-5.5 將舍入為 -5; -5.52?將舍入為 -6),如下圖:

把不同的數(shù)舍入為最接近的整數(shù),代碼如下：

運(yùn)行結(jié)果：

2 3 0 -6 -7

隨機(jī)數(shù) random()

random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個(gè)隨機(jī)數(shù)。

語(yǔ)法：

Math.random();

注意：返回一個(gè)大于或等于 0 但小于 1 的符號(hào)為正的數(shù)字值。

我們?nèi)〉媒橛?0 到 1 之間的一個(gè)隨機(jī)數(shù)，代碼如下：

運(yùn)行結(jié)果：

0.190305486195328? 注意:因?yàn)槭请S機(jī)數(shù)，所以每次運(yùn)行結(jié)果不一樣，但是0 ~ 1的數(shù)值。

獲得0 ~ 10之間的隨機(jī)數(shù)，代碼如下:

運(yùn)行結(jié)果：

8.72153625893887

Array 數(shù)組對(duì)象

數(shù)組對(duì)象是一個(gè)對(duì)象的集合，里邊的對(duì)象可以是不同類型的。數(shù)組的每一個(gè)成員對(duì)象都有一個(gè)“下標(biāo)”，用來(lái)表示它在數(shù)組中的位置，從零開(kāi)始。

數(shù)組定義的方法：

1. 定義了一個(gè)空數(shù)組:

var? 數(shù)組名= new Array();

2. 定義時(shí)指定有n個(gè)空元素的數(shù)組：

var 數(shù)組名 =new Array(n);

3.定義數(shù)組的時(shí)候，直接初始化數(shù)據(jù)：

var ?數(shù)組名 = [<元素1>, <元素2>, <元素3>...];

我們定義myArray數(shù)組，并賦值，代碼如下：

var myArray = [2, 8, 6];

說(shuō)明：定義了一個(gè)數(shù)組 myArray，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

數(shù)組元素使用：

數(shù)組名[下標(biāo)] = 值;

注意: 數(shù)組的下標(biāo)用方括號(hào)括起來(lái)，從0開(kāi)始。

數(shù)組屬性：

length 用法：<數(shù)組對(duì)象>.length；返回：數(shù)組的長(zhǎng)度，即數(shù)組里有多少個(gè)元素。它等于數(shù)組里最后一個(gè)元素的下標(biāo)加一。

數(shù)組方法：

數(shù)組連接concat()

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。此方法返回一個(gè)新數(shù)組，不改變?cè)瓉?lái)的數(shù)組。

語(yǔ)法

arrayObject.concat(array1,array2,...,arrayN)

參數(shù)說(shuō)明：

注意:??該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。

我們創(chuàng)建一個(gè)數(shù)組，將把 concat() 中的參數(shù)連接到數(shù)組 myarr 中，代碼如下：

運(yùn)行結(jié)果：

1,2,3,4,5 1,2,3

我們創(chuàng)建了三個(gè)數(shù)組，然后使用 concat() 把它們連接起來(lái)，代碼如下：

運(yùn)行結(jié)果：

hello!,I,love,JavaScript,!

指定分隔符連接數(shù)組元素join()

join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過(guò)指定的分隔符進(jìn)行分隔的。

語(yǔ)法：

arrayObject.join(分隔符)

參數(shù)說(shuō)明:

注意：返回一個(gè)字符串，該字符串把數(shù)組中的各個(gè)元素串起來(lái)，用<分隔符>置于元素與元素之間。這個(gè)方法不影響數(shù)組原本的內(nèi)容。我們使用join（）方法，將數(shù)組的所有元素放入一個(gè)字符串中，代碼如下： <script type="text/javascript">var myarr = new Array(3);myarr[0] = "I";myarr[1] = "love";myarr[2] = "JavaScript";document.write(myarr.join()); </script>

運(yùn)行結(jié)果：

I,love,JavaScript

我們將使用分隔符來(lái)分隔數(shù)組中的元素，代碼如下：

運(yùn)行結(jié)果：

I.love.JavaScript

顛倒數(shù)組元素順序reverse()

reverse() 方法用于顛倒數(shù)組中元素的順序。

語(yǔ)法：

arrayObject.reverse()

注意：該方法會(huì)改變?cè)瓉?lái)的數(shù)組，而不會(huì)創(chuàng)建新的數(shù)組。

定義數(shù)組myarr并賦值，然后顛倒其元素的順序：

運(yùn)行結(jié)果：

1,2,3 3,2,1

選定元素slice()

slice() 方法可從已有的數(shù)組中返回選定的元素。

語(yǔ)法

arrayObject.slice(start,end)

參數(shù)說(shuō)明：

1.返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

2. 該方法并不會(huì)修改數(shù)組，而是返回一個(gè)子數(shù)組。

注意：

1. 可使用負(fù)值從數(shù)組的尾部選取元素。

2.如果 end 未被規(guī)定，那么 slice() 方法會(huì)選取從 start 到數(shù)組結(jié)尾的所有元素。

3. String.slice() 與 Array.slice() 相似。

我們將創(chuàng)建一個(gè)新數(shù)組，然后從其中選取的元素，代碼如下：

運(yùn)行結(jié)果：

1,2,3,4,5,6 3,4 1,2,3,4,5,6

數(shù)組排序sort()

sort()方法使數(shù)組中的元素按照一定的順序排列。

語(yǔ)法:

arrayObject.sort(方法函數(shù))

參數(shù)說(shuō)明：

1.如果不指定<方法函數(shù)>，則按unicode碼順序排列。

2.如果指定<方法函數(shù)>，則按<方法函數(shù)>所指定的排序方法排序。

myArray.sort(sortMethod);

注意:?該函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b，其返回值如下：?

? 若返回值<=-1，則表示 A 在排序后的序列中出現(xiàn)在 B 之前。
? 若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
? 若返回值>=1，則表示 A 在排序后的序列中出現(xiàn)在 B 之后。

1.使用sort()將數(shù)組進(jìn)行排序，代碼如下：

運(yùn)行結(jié)果：

Hello,JavaScript,John,love 1,100,16,50,6,80

注意:上面的代碼沒(méi)有按照數(shù)值的大小對(duì)數(shù)字進(jìn)行排序。

2.如要實(shí)現(xiàn)這一點(diǎn)，就必須使用一個(gè)排序函數(shù)，代碼如下：

運(yùn)行結(jié)果：

80,16,50,6,100,1 1,6,16,50,80,100

window對(duì)象

window對(duì)象是BOM（瀏覽器對(duì)象模型）的核心，window對(duì)象指當(dāng)前的瀏覽器窗口。

window對(duì)象方法:

JavaScript 計(jì)時(shí)器

在JavaScript中，我們可以在設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計(jì)時(shí)器類型：
一次性計(jì)時(shí)器：僅在指定的延遲時(shí)間之后觸發(fā)一次。
間隔性觸發(fā)計(jì)時(shí)器：每隔一定的時(shí)間間隔就觸發(fā)一次。
計(jì)時(shí)器方法：

計(jì)時(shí)器setInterval()

在執(zhí)行時(shí),從載入頁(yè)面后每隔指定的時(shí)間執(zhí)行代碼。

語(yǔ)法:

setInterval(代碼,交互時(shí)間);

參數(shù)說(shuō)明：

1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。

2. 交互時(shí)間：周期性執(zhí)行或調(diào)用表達(dá)式之間的時(shí)間間隔，以毫秒計(jì)（1s=1000ms）。

返回值:

一個(gè)可以傳遞給 clearInterval() 從而取消對(duì)"代碼"的周期性執(zhí)行的值。

調(diào)用函數(shù)格式(假設(shè)有一個(gè)clock()函數(shù)):

setInterval("clock()",1000) 或 setInterval(clock,1000)

我們?cè)O(shè)置一個(gè)計(jì)時(shí)器，每隔100毫秒調(diào)用clock()函數(shù)，并將時(shí)間顯示出來(lái)，代碼如下:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>計(jì)時(shí)器</title> <script type="text/javascript">var int=setInterval(clock, 100)function clock(){var time=new Date();document.getElementById("clock").value = time;} </script> </head> <body><form><input type="text" id="clock" size="50" /></form> </body> </html>

取消計(jì)時(shí)器clearInterval()

clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時(shí)間。

語(yǔ)法：

clearInterval(id_of_setInterval)

參數(shù)說(shuō)明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒調(diào)用 clock() 函數(shù),并顯示時(shí)間。當(dāng)點(diǎn)擊按鈕時(shí)，停止時(shí)間,代碼如下:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>計(jì)時(shí)器</title> <script type="text/javascript">function clock(){var time=new Date(); document.getElementById("clock").value = time;} // 每隔100毫秒調(diào)用clock函數(shù)，并將返回值賦值給ivar i=setInterval("clock()",100); </script> </head> <body><form><input type="text" id="clock" size="50" /><input type="button" value="Stop" οnclick="clearInterval(i)" /></form> </body> </html>

計(jì)時(shí)器setTimeout()

setTimeout()計(jì)時(shí)器，在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。

語(yǔ)法:

setTimeout(代碼,延遲時(shí)間);

參數(shù)說(shuō)明：

1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 延時(shí)時(shí)間：在執(zhí)行代碼前需等待的時(shí)間，以毫秒為單位（1s=1000ms)。

當(dāng)我們打開(kāi)網(wǎng)頁(yè)3秒后，在彈出一個(gè)提示框，代碼如下:

<!DOCTYPE HTML> <html> <head> <script type="text/javascript">setTimeout("alert('Hello!')", 3000 ); </script> </head> <body> </body> </html>

當(dāng)按鈕start被點(diǎn)擊時(shí)，setTimeout()調(diào)用函數(shù)，在5秒后彈出一個(gè)提示框。

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function tinfo(){var t=setTimeout("alert('Hello!')",5000);} </script> </head> <body> <form><input type="button" value="start" onClick="tinfo()"> </form> </body> </html>

要?jiǎng)?chuàng)建一個(gè)運(yùn)行于無(wú)窮循環(huán)中的計(jì)數(shù)器，我們需要編寫一個(gè)函數(shù)來(lái)調(diào)用其自身。在下面的代碼，當(dāng)按鈕被點(diǎn)擊后，輸入域便從0開(kāi)始計(jì)數(shù)。

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var num=0; function numCount(){document.getElementById('txt').value=num;num=num+1;setTimeout("numCount()",1000);} </script> </head> <body> <form> <input type="text" id="txt" /> <input type="button" value="Start" onClick="numCount()" /> </form> </body> </html>

取消計(jì)時(shí)器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止計(jì)時(shí)器。

語(yǔ)法:

clearTimeout(id_of_setTimeout)

參數(shù)說(shuō)明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。

下面的例子和上節(jié)的無(wú)窮循環(huán)的例子相似。唯一不同是，現(xiàn)在我們添加了一個(gè) "Stop" 按鈕來(lái)停止這個(gè)計(jì)數(shù)器：

<!DOCTYPE HTML> <html> <head> <script type="text/javascript">var num=0,i;function timedCount(){document.getElementById('txt').value=num;num=num+1;i=setTimeout(timedCount,1000);}setTimeout(timedCount,1000);function stopCount(){clearTimeout(i);} </script> </head> <body><form><input type="text" id="txt"><input type="button" value="Stop" onClick="stopCount()"></form> </body> </html>

History 對(duì)象

history對(duì)象記錄了用戶曾經(jīng)瀏覽過(guò)的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。

注意:從窗口被打開(kāi)那刻開(kāi)始記錄，每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)乃至每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。

語(yǔ)法：

window.history.[屬性|方法]

注意：window可以省略。

History 對(duì)象屬性

History 對(duì)象方法

使用length屬性，當(dāng)前窗口的瀏覽歷史總長(zhǎng)度，代碼如下：

返回前一個(gè)瀏覽的頁(yè)面

back()方法，加載 history 列表中的前一個(gè) URL。

語(yǔ)法：

window.history.back();

比如，返回前一個(gè)瀏覽的頁(yè)面，代碼如下：

window.history.back();

注意：等同于點(diǎn)擊瀏覽器的倒退按鈕。

back()相當(dāng)于go(-1),代碼如下:

window.history.go(-1);

返回下一個(gè)瀏覽的頁(yè)面

forward()方法，加載 history 列表中的下一個(gè) URL。

如果倒退之后，再想回到倒退之前瀏覽的頁(yè)面，則可以使用forward()方法,代碼如下:

window.history.forward();

注意：等價(jià)點(diǎn)擊前進(jìn)按鈕。

forward()相當(dāng)于go(1),代碼如下:

window.history.go(1);

返回瀏覽歷史中的其他頁(yè)面

go()方法，根據(jù)當(dāng)前所處的頁(yè)面，加載 history 列表中的某個(gè)具體的頁(yè)面。

語(yǔ)法：

window.history.go(number);

參數(shù)：

瀏覽器中，返回當(dāng)前頁(yè)面之前瀏覽過(guò)的第二個(gè)歷史頁(yè)面，代碼如下：

window.history.go(-2);

注意：和在瀏覽器中單擊兩次后退按鈕操作一樣。

同理，返回當(dāng)前頁(yè)面之后瀏覽過(guò)的第三個(gè)歷史頁(yè)面，代碼如下：

window.history.go(3);

Location對(duì)象

location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。

語(yǔ)法:

location.[屬性|方法] document.write(window.location.href);//獲取當(dāng)前顯示文檔的URL

location對(duì)象屬性圖示:

location 對(duì)象屬性：

location 對(duì)象方法:

Navigator對(duì)象

Navigator 對(duì)象包含有關(guān)瀏覽器的信息，通常用于檢測(cè)瀏覽器與操作系統(tǒng)的版本。

對(duì)象屬性:

查看瀏覽器的名稱和版本，代碼如下:

userAgent

返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

語(yǔ)法

navigator.userAgent

幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內(nèi)核。

使用userAgent判斷使用的是什么瀏覽器(假設(shè)使用的是IE8瀏覽器),代碼如下:

運(yùn)行結(jié)果:

screen對(duì)象

screen對(duì)象用于獲取用戶的屏幕信息。

語(yǔ)法：

window.screen.屬性

對(duì)象屬性:

屏幕分辨率的高和寬

window.screen 對(duì)象包含有關(guān)用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計(jì)。
2. window.screen 對(duì)象在編寫時(shí)可以不使用 window 這個(gè)前綴。
我們來(lái)獲取屏幕的高和寬，代碼如下:

屏幕可用高和寬度

1. screen.availWidth 屬性返回訪問(wèn)者屏幕的寬度，以像素計(jì)，減去界面特性，比如任務(wù)欄。

2. screen.availHeight 屬性返回訪問(wèn)者屏幕的高度，以像素計(jì)，減去界面特性，比如任務(wù)欄。

注意:

不同系統(tǒng)的任務(wù)欄默認(rèn)高度不一樣，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。

我們來(lái)獲取屏幕的可用高和寬度，代碼如下：

注意:根據(jù)屏幕的不同顯示值不同。

編程練習(xí)：

制作一個(gè)跳轉(zhuǎn)提示頁(yè)面：

要求：

1. 如果打開(kāi)該頁(yè)面后，如果不做任何操作則5秒后自動(dòng)跳轉(zhuǎn)到一個(gè)新的地址，如慕課網(wǎng)主頁(yè)。

2. 如果點(diǎn)擊“返回”按鈕則返回前一個(gè)頁(yè)面。

效果:

注意: 在窗口中運(yùn)行該程序時(shí)，該窗口一定要有歷史瀏覽記錄，否則"返回"無(wú)效果。

<!DOCTYPE html> <html><head><title>瀏覽器對(duì)象</title> <meta http-equiv="Content-Type" content="text/html; charset=gkb"/> </head><body><h1>操作成功</h1> <span id="second" >5</span><span >秒后回到主頁(yè)</span><a href="javascript:back();">返回</a><script type="text/javascript"> var num=document.getElementById("second").innerHTML;//獲取顯示秒數(shù)的元素，通過(guò)定時(shí)器來(lái)更改秒數(shù)。function count(){num--;document.getElementById("second").innerHTML=num;if(num==0){location.assign("Http://www.imooc.com");}}setInterval("count()",1000);//通過(guò)window的location和history對(duì)象來(lái)控制網(wǎng)頁(yè)的跳轉(zhuǎn)。function back(){window.history.back();}</script> </body> </html>

————————————————————————————————————————————————————————————————————-——

? ? ? ? ? 以上內(nèi)容參考自慕課網(wǎng)：http://www.imooc.com

總結(jié)

以上是生活随笔為你收集整理的JavaScript知识笔记（三）——内置对象、浏览器对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：英雄联盟酒捅怎么连招啊求大神
下一篇：【工作感悟】全网最经典26道Spring