瀏覽器對象BOM
一 window對象的屬性和方法
1.window對象是瀏覽器窗口對文檔提供的一個現實的容器
2 window的屬性和方法：window.屬性 和window.方法 (可省略window對象)
3 對話框 (BOM中的三種對話框)
1.alert() 顯示一段消息和一個帶有確認按鈕的警告框 ，//消息即為括號內的內容
2 .confirm() 顯示一段用戶輸入消息的對話框，返回值為布爾值 //顯示的消息為用戶在括號內寫 的內容
1.確認框通常用於驗證是否接受用戶操作。
2.當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
3.當你點擊 "確認", 確認框返回 true， 如果點擊 "取消", 確認框返回 false。
3. prompt() 顯示可提示用戶輸入的對話框,第一個參數是提示,第二個參數是默認值
1.提示框經常用於提示用戶在進入頁面前輸入某個值。
2.當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。
3.如果用戶點擊確認，那麽返回值為輸入的值。如果用戶點擊取消，那麽返回值為 null。
<script type="text/javascript">
document.write(
</script>
//小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>單擊計算圓面積按鈕彈出相對應的輸入對話框</title>
<script type="text/javascript">
window.onload=function(){
var but1=document.getElementById("but")
but1.onclick=function(){
var r=prompt("請輸入圓的半徑");
if(r==""){
alert("請輸入數值");
}
else if(isNaN(r)){
alert("輸入的數非數值")
}
else {
confirm(r*r*Math.PI)
}
}
}
</script>
</head>
<body>
<input type="button" name="" value="計算圓面積" id="but">
</body>
</html>
4.窗體控制
1.open() 打開一個新的瀏覽器窗口或者查找一個已命名的窗口
1 url :新窗口路徑
2 新窗口的名稱
3 窗口屬性
width:新建窗口的寬度
height：新建窗口的高度
top：左上角垂直坐標
left：左上角水平坐標
2 close () 關閉瀏覽器窗口
<body>
<input type="button" value=" open新窗口" onclick="openWin()"> <br>
<input type="button" value="close新窗口" onclick="closeWin()"> <br>
<input type="button" value="moveTo新窗口" onclick="moveWin1()"> <br>
<input type="button" value="moveBy新窗口" onclick="moveWin2()"> <br>
<input type="button" value="sizeBy新窗口" onclick="sizeWin1()"> <br>
<input type="button" value="moveTo新窗口" onclick="sizeWin2()"> <br>
<script>
// 打開和關閉窗口練習
var newWindow;
function openWin(){
newWindow=window.open(‘‘,‘‘,‘top=150,left=150,width=300,height=300‘)
}
//第一個參數若為指定的url如（www.baidu.com）則moveTo moveBy resizeBy resizeTo沒有效果，(只有當沒有值時，各個功能才能實現)
結果：打開一個長為300，寬為300，左上角坐標為（150,150）的窗口
function closeWin(){
newWindow.close() //關閉窗口
}
function moveWin1(){
newWindow.moveTo(300,300) //移動到這裏即為（300,300）
newWindow.focus() //獲得焦點
}
function moveWin2(){
newWindow.moveBy(30,30)//相對於之前點再移動
newWindow.focus()
}
function sizeWin1(){
newWindow.resizeBy(30,30)//把窗口大小增加或減小指定的寬度和高度
newWindow.focus()
}
function sizeWin2(){
newWindow.resizeTo(30,30)//把窗口大小調整為指定的寬度和高度
newWindow.focus()
}
</script>
</body>
4. 定時器
1.setInterval(function ，millisecond) 按照指定周期（毫秒數）來調用函數或計算表達式
2 clearInterval（）清除計時器
3 setTimeout（function，milliseconds） 按照指定時間後調用函數
4 clearTimeout 清除定時器
1.用setInterval()寫圖片輪播
<body>
<p>請點擊一下圖片</p>
<div class="div1" onclick="autoplay()">
<img src="image/10.jpg" id="pic">
</div>
<script>
var imageArr=["image/9.png","image/7.jpg","image/11.jpg","image/15.png","image/10.jpg"]
var i=0;
function autoplay(){
setInterval(cycle,2000);
}
function cycle(){
i++;
if(i==imageArr.length) i=0;
document.getElementById("pic").src=imageArr[i];
}
</script>
</body>
2 使用setTimeout寫圖片輪播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片輪播效果(使用setTimeout實現)</title>
<style>
#div1{
width:320px;
height: 320px;
margin:0 auto;
background: url(image/9.png);
}
</style>
</head>
<body>
<div id="div1">
</div>
<script>
var div1=document.getElementById("div1");
var imageArr=["url(image/7.jpg)","url(image/10.jpg)","url(image/11.jpg)"]
div1.onclick=fun1;
function fun1(){
div1.style.backgroundImage="url(image/7.jpg)";
setTimeout(‘fun2()‘,1000)
}
function fun2(){
div1.style.backgroundImage="url(image/10.jpg)";
setTimeout(‘fun3()‘,1000)
}
function fun3(){
div1.style.backgroundImage="url(image/11.jpg)";
setTimeout(‘fun1()‘,1000)
}
</script>
</body>
</html>
5 Window 對象屬性
1 innerHeight :返回窗口文檔顯示區的高度
2 innerWidth：返回窗口文檔顯示區的寬度
二 History 對象的常用方法
1.back() 加載history 列表中的前一個URL
2 forword() 加載history列表中的下一個URL
3 go() 加載history列表中的某個具體頁面
三 Screen 對象
- availHeight 返回顯示屏幕的高度 (除 Windows 任務欄之外)。
- availWidth 返回顯示屏幕的寬度 (除 Windows 任務欄之外)。
- height 返回顯示屏幕的高度。
- width 返回顯示器屏幕的寬度。
- bufferDepth 設置或返回調色板的比特深度。
瀏覽器對象BOM