Math對象
- Math 對象用于執(zhí)行數(shù)學(xué)任務(wù)乎折。
- Math 對象并不像 Date 和 String 那樣是對象的類,因此沒有構(gòu)造函數(shù) Math()屑咳。
算數(shù)值
JavaScript 提供 8 種可被 Math 對象訪問的算數(shù)值:
- Math.PI 返回圓周率(約等于3.14159)呀枢。
- Math.E 返回算術(shù)常量 e霉晕,即自然對數(shù)的底數(shù)(約等于2.718)缕减。
- Math.SQRT2 返回 2 的平方根(約等于 1.414)雷客。
- Math.SQRT1_2 返回返回 1/2 的平方根(約等于 0.707)芒珠。
- Math.LN2 返回 2 的自然對數(shù)(約等于0.693)桥狡。
- Math.LN10 返回 10 的自然對數(shù)(約等于2.302)。
- Math.LOG2E 返回以 2 為底的 e 的對數(shù)(約等于 1.443)皱卓。
- Math.LOG10E 返回以 10 為底的 e 的對數(shù)(約等于0.434)裹芝。
document.write(Math.PI);
數(shù)值取整
- ceil(x) 對數(shù)進行上舍入。
- floor(x) 對數(shù)進行下舍入娜汁。
- round(x) 把數(shù)四舍五入為最接近的整數(shù)嫂易。
document.write(Math.floor(3.6));
隨機數(shù)
- random() 返回 0 ~ 1 之間的隨機數(shù)。
- 注意并不包括0和1
document.write(Math.random());
三角函數(shù)
- cos(x) 返回數(shù)的余弦掐禁。
- acos(x) 返回 x 的反余弦值怜械。
- sin(x) 返回數(shù)的正弦。
- asin(x) 返回 x 的反正弦值傅事。
- tan(x) 返回角的正切缕允。
- atan(x) 以介于 -PI/2 與 PI/2 弧度之間的數(shù)值來返回 x 的反正切值。
document.write(Math.cos(Math.PI/2));
其他方法
- max(x,y) 返回 x 和 y 中的最高值蹭越。
- min(x,y) 返回 x 和 y 中的最低值障本。
- abs(x) 返回 x 的絕對值。
- atan2(y,x) 返回從 x 軸到點 (x,y) 的角度(介于 -PI/2 與 PI/2 弧度之間)响鹃。
- exp(x) 返回 e 的指數(shù)驾霜。
- log(x) 返回數(shù)的自然對數(shù)(底為e)。
- pow(x,y) 返回 x 的 y 次冪买置。
- valueOf() 返回 Math 對象的原始值
document.write(Math.max(5,10));
字符串對象
- 字符串是非常重要的數(shù)據(jù)類型粪糙,除了基本字符串外,JavaScript還提供了字符串的引用類型--字符串對象忿项。
- 字符串對象提供了字符串檢索蓉冈、替換、連接等方法...
- 可以通過new 關(guān)鍵字創(chuàng)建字符串對象
- var str=new String()
- length 屬性返回字符串的長度(字符數(shù))倦卖。
var str1 = "hello";
var str2 = new String()
document.write(typeof str1);
document.write(typeof str2);
document.write(str1.length);
document.write(str2.length);
字符串與數(shù)字的轉(zhuǎn)換
- toString() 返回字符串洒擦。可以將數(shù)值轉(zhuǎn)換成字符串怕膛。
- 如果需要獲取數(shù)值的二進制熟嫩、八進制、十六進制的字符串表示褐捻,則可以給toString()傳遞一個表示進制的的整數(shù)
- parseInt()函數(shù)可以將字符串轉(zhuǎn)換成整數(shù)
- parseFloat()函數(shù)可以將字符串轉(zhuǎn)換浮點數(shù)
- Number()函數(shù)可以將任意類型的值轉(zhuǎn)換數(shù)值掸茅。
var str2 = num.toString();
var str2 = num.toString(2);
var str2 = parseInt(num);
字符串對象的常用方法
- charAt() 返回在指定位置的字符椅邓。
- charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
- concat() 連接字符串昧狮。
- slice(n,m) 提取字符串n到m之間的片斷(不包括m位置的字符串)景馁,并在新的字符串中返回被提取的部分。
- substring() 提取字符串中兩個指定的索引號之間的字符逗鸣。大多數(shù)情況和上一個作用相同合住,當參數(shù)為負值時會有不同,但這種情況較少用
- substr(n,m) 從起始索引號提取字符串中指定數(shù)目的字符撒璧。
- split() 把字符串分割為字符串數(shù)組透葛。
- indexOf() 檢索字符串,返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。注意卿樱,如果查找不到會返回 -1
- lastIndexOf() 從后向前搜索字符串僚害。
- toLowerCase() 把字符串轉(zhuǎn)換為小寫。
- toUpperCase() 把字符串轉(zhuǎn)換為大寫繁调。
- match() 找到一個或多個正則表達式的匹配萨蚕。(正則表達式后續(xù)課程會講)
該方法會返回一個數(shù)組树叽,數(shù)組中包含了所有符合條件的文本兴想。 - replace() 替換與正則表達式匹配的子串,并返回替換后的字符串毁习,注意原字符串不會改變
- search() 檢索與正則表達式相匹配的值烤送。查找與參數(shù)模式相匹配的文本寒随,并返回該文本的位置。若無則返回null(indexOf()會返回-1).與indexOf()相似帮坚。
- ......
需要注意的是妻往,JavaScript 的字符串是不可變的(immutable),String 類定義的方法都不能改變字符串的內(nèi)容试和。像 String.toUpperCase() 這樣的方法讯泣,返回的是全新的字符串,而不是修改原始字符串阅悍。
var str1 = "hello";
var str2 = new String("javascript");
document.write(str2.charAt(1)+'<br>');
document.write(str2.charCodeAt(1)+'<br>');
document.write(str2.concat('a')+'<br>');
瀏覽器對象BOM
基本概念
- BOM是Browser Object Model的縮寫好渠,簡稱瀏覽器對象模型
- BOM由一系列相關(guān)的對象構(gòu)成,并且每個對象都提供了很多方法與屬性
- 基本的BOM體系結(jié)構(gòu)圖
- 能利用BOM做什么节视?
BOM提供了一些訪問窗口對象的一些方法拳锚,我們可以用它來移動窗口位置,改變窗口大小寻行,打開新窗口和關(guān)閉窗口霍掺,彈出對話框,進行導(dǎo)航以及獲取客戶的一些信息如:瀏覽器品牌版本,屏幕分辨率杆烁。但BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象牙丽,以使得我們可以通過這個入口來使用DOM的強大功能!M没辍烤芦!
window對象的方法和屬性
window對象是瀏覽器窗口對文檔提供的一個現(xiàn)實的容器,代表打開的瀏覽器窗口析校,是每一個加載文檔的父對象
window的屬性和方法調(diào)用方法:window.屬性构罗,window.方法 也可以直接調(diào)用省略 window.
-
對話框
- alert() 顯示帶有一段消息和一個確認按鈕的警告框。
- confirm() 顯示可提示用戶輸入的對話框勺良。返回值為布爾值
- prompt() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框绰播。
第一個參數(shù)是提示,第二個參數(shù)是默認值;
返回值為輸入的值骄噪,取消返回null
-
窗體控制
- open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口尚困。
- URL:聲明了要在新窗口中顯示的文檔的 URL。
- name:聲明了新窗口的名稱或者窗口目標链蕊。
- features:聲明了新窗口要顯示的標準瀏覽器的特征事甜。
- 窗口的屬性:
- 常用:
- width:新建窗口寬度
- heigth:新建窗口高度
- top:左上角垂直坐標
- left:左上角水平坐標
- 其他不太常用的屬性:
- toolbar:指定窗口是否有標準工具欄。當該選項的值為1或yes時滔韵,表示有標準工具欄逻谦,當該選項的值為0或no時,表示沒有標準工具欄陪蜻;
- resizable:指定窗口是否可改變大小邦马,選項的值及含義與toolbar相同;
- ocation:指定窗口是否有地址工具欄宴卖,選項的值及含義與toolbar相同滋将;
- directories:指定窗口是否有鏈接工具欄,選項的值及含義與toolbar相同症昏;
- status:指定窗口是否有狀態(tài)欄随闽,選項的值及含義與toolbar相同;
- menubar:指定窗口是否有菜單肝谭,選項的值及含義與toolbar相同掘宪;
- scrollbar:指定當前窗口文檔大于窗口時是否有滾動條,選項的值及含義與 toolbar相同攘烛;
- ........
- 常用:
- close() 關(guān)閉瀏覽器窗口魏滚。
- open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口尚困。
-
定時器
- setInterval() 按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式。
- setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式坟漱。
- clearInterval() 取消由 setInterval() 設(shè)置的 timeout鼠次。
- clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。
var timeId = setTimeout(test,10); clearTimeout(timeId);
-
其他方法
- print() 打印當前窗口的內(nèi)容。
- blur() 把鍵盤焦點從頂層窗口移開须眷。
- createPopup() 創(chuàng)建一個 pop-up 窗口竖瘾。
- focus() 把鍵盤焦點給予一個窗口。
- moveBy() 可相對窗口的當前坐標把它移動指定的像素花颗。
- moveTo() 把窗口的左上角移動到一個指定的坐標捕传。
- resizeBy() 按照指定的像素調(diào)整窗口的大小。
- resizeTo() 把窗口的大小調(diào)整到指定的寬度和高度扩劝。
- scrollBy() 按照指定的像素值來滾動內(nèi)容庸论。
- scrollTo() 把內(nèi)容滾動到指定的坐標。
-
Window 對象屬性
- 掌握部分
- innerWidth 返回窗口的文檔顯示區(qū)的寬度棒呛。
- innerHeight 返回窗口的文檔顯示區(qū)的高度聂示。
- 了解部分
- name 設(shè)置或返回窗口的名稱。
- opener 返回對創(chuàng)建此窗口的窗口的引用簇秒。
- closed 返回窗口是否已被關(guān)閉鱼喉。
- self 返回對當前窗口的引用。
- top 返回最頂層的先輩窗口趋观。
- outerheight 返回窗口的外部高度扛禽。
- outerwidth 返回窗口的外部寬度。
- status 設(shè)置窗口狀態(tài)欄的文本皱坛。
- ......
- 掌握部分
History對象的常用方法
history對象有back和forward兩個方法编曼,它可以跳轉(zhuǎn)到當前頁的上一頁和下一頁,可以用length屬性查看客戶端瀏覽器的歷史列表中訪問的網(wǎng)頁個數(shù)
- back() 加載 history 列表中的前一個 URL剩辟。
- forward() 加載 history 列表中的下一個 URL掐场。
- go() 加載 history 列表中的某個具體頁面。
Location 對象
- Location 對象的屬性
- href 設(shè)置或返回完整的 URL贩猎。
- host 設(shè)置或返回主機名和當前 URL 的端口號熊户。
- hash 設(shè)置或返回從井號 (#) 開始的 URL(錨)。
- hostname 設(shè)置或返回當前 URL 的主機名融欧。
- pathname 設(shè)置或返回當前 URL 的路徑部分敏弃。
- port 設(shè)置或返回當前 URL 的端口號。
- protocol 設(shè)置或返回當前 URL 的協(xié)議噪馏。
- search 設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)麦到。
- Location 對象的方法
- assign() 加載新的文檔。
- reload() 重新加載當前文檔欠肾。
如果該方法沒有規(guī)定參數(shù)瓶颠,或者參數(shù)是 false,它就會用 HTTP 頭 If-Modified-Since 來檢測服務(wù)器上的文檔是否已改變刺桃。如果文檔已改變粹淋,reload() 會再次下載該文檔。如果文檔未改變,則該方法將從緩存中裝載文檔桃移。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的屋匕。 如果把該方法的參數(shù)設(shè)置為 true,那么無論文檔的最后修改日期是什么借杰,它都會繞過緩存过吻,從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣蔗衡。
- replace() 用新的文檔替換當前文檔纤虽。
replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時绞惦,新的 URL 將覆蓋 History 對象中的當前記錄逼纸。
Screen 對象
- availHeight 返回顯示屏幕的高度 (除 Windows 任務(wù)欄之外)。
- availWidth 返回顯示屏幕的寬度 (除 Windows 任務(wù)欄之外)济蝉。
- height 返回顯示屏幕的高度杰刽。
- width 返回顯示器屏幕的寬度。
- bufferDepth 設(shè)置或返回調(diào)色板的比特深度堆生。
- ......
Navigator 對象屬性
- appCodeName 返回瀏覽器的代碼名专缠。
- appMinorVersion 返回瀏覽器的次級版本。
- appName 返回瀏覽器的名稱淑仆。
- appVersion 返回瀏覽器的平臺和版本信息。
- cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值哥力。
- userAgent 返回由客戶機發(fā)送服務(wù)器的 user-agent 頭部的值
- onLine 返回指明系統(tǒng)是否處于脫機模式的布爾值蔗怠。
- ......
// 動態(tài)顯示時間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function clock() {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var str = "現(xiàn)在時間:"
if (hours < 12) {
str+='上午';
}else {
str+='下午';
}
str+=hours+'時'+minutes+'分'+seconds+'秒';
// document.write(str+'<br>')
var clock=document.getElementById('clock')
clock.value=str
}
setInterval('clock()',1000);
</script>
<input type="text" id="clock" size="40">
<input type="button" id="clock" size="40" value="停止時間" onclick="clearInterval(timeId) ">
</body>
</html>
// 比賽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var guojing=new Object();
guojing.name="郭靖"
guojing.HP=500;
guojing.gj=90;
guojing.sd=60;
guojing.skill=new Array('亢龍有悔','飛龍在天','見龍在田','鴻漸于陸','潛龍勿用')
var ouyang=new Object();
ouyang.name='歐陽鋒';
ouyang.HP=800;
ouyang.gj=100;
ouyang.sd=40;
ouyang.skill=new Array('靈蛇棍法','鳳凰神力','顛倒陰陽','逆轉(zhuǎn)靜脈','天蟾神功')
function whoGjwho(a,b) {
return a.sd*Math.random()>b.sd*Math.random()?[a,b]:[b,a];
}
function game() {
var skillIndex=Math.floor(Math.random()*5)
var fight = whoGjwho(guojing,ouyang);
var attacker = fight[0];
var defender = fight[1];
var damage=attacker.gj*Math.random()-defender.gj*Math.random();
if(damage<=0){
damage=0
}else{
damage=Math.ceil(damage);
}
defender.HP-=damage;
document.write(attacker.name+"使用了一招"+attacker.skill[skillIndex]+'<br>')
document.write(defender.name+"損失了"+damage+'點HP'+'<br>')
if (defender.HP>0) {
document.write(defender.name+"的HP:"+defender.HP+'<br>'+attacker.name+'的HP:'+attacker.HP+'<hr>')
}else{
document.write(defender.name+'戰(zhàn)敗了'+'<br>'+attacker.name+'取得了勝利!'+'<br>')
alert(attacker.name+'取得了勝利吩跋!'+'Gmame Over!')
clearInterval(zd)
}
}
var zd=setInterval('game()',50)
</script>
</body>
</html>