天天看點

js的bom對象簡介

bom:全稱為:browser object model 浏覽器對象模型

那具體有哪些對象呢?

1.navigator 可以擷取客戶機的資訊(擷取浏覽器的資訊)。比如浏覽器的類型。

2.screen 擷取螢幕的一些資訊,例如分辨率。

document.write(screen.width);
 document.write(screen.height); 
           

3.location擷取到請求的url位址,并且可以設定url的位址,例如在頁面上放置一個按鈕,按鈕上綁定一個事件,當我點選這個按鈕時,頁面可以跳轉到另外一個頁面。

<input type="button" value="tiaozhuan" onclick="href1();"/>
function href1(){
location.href="a.html";
}
           

4.history 請求url的曆史記錄。

<input type="button" value="back" onclick="back1();"/>
 <input type="button" value="next" onclick="next1();"/>
 <script type="text/javascript">
 //到上一個頁面
 function back1(){
     history.back();
 }
 //到下一個頁面
 function next1(){
     history.forward();
 }
           

5.Window 視窗對象,js的頂層對象(所有的bom對象都是在window裡面操作的)。

主要有以下幾個方法:(都很重要)

window.alert();頁面彈出一個框,顯示内容

window.confirm();表示确認框

prompt();輸入的對話框

open (”打開新視窗的位址URL”,”視窗特征比如寬度高度”);打開一個新的視窗。建立按鈕,點選 這個按鈕,打開一個新的視窗。

window.open(“06js.html”,”“,”width=100,height=200”);

close();關閉視窗,浏覽器相容性要差一點

setInterval(“js代碼”,”毫秒數”)定時器,按照指定周期循環

window.setInterval(“alert’123’”,2000);

setTimeout()在指定的毫秒數之後來調用

window.setTimeout (“js代碼”,”毫秒數”);

clearInterval()清除setInterval定時器

clearTimeout()清除setTimeout

具體的完整代碼實作如下:

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
 <input type="button" value="tiaozhuan" onclick="open1();"/>
 <input type="button" value="tiaozhuan" onclick="href1();"/>
  <input type="button" value="tiaozhuan" onclick="clear1();"/>
 <input type="button" value="tiaozhuan" onclick="clear2();"/>

 <script type="text/javascript">
 function href1(){
    location.href="a.html";
 }
 //navigator對象
 document.write(navigator.appName);

 //screen對象
 document.write(screen.width);
 document.write(screen.height); 

 //location
 document.write("<hr/>");

 //history

 //confirm
 var flag=window.confirm("你是豬嗎");
 if(flag==true){
     alert("删除成功");
 }
 if(flag==false){
     alert("删除失敗");
     }

 alert(flag);

//prompt 輸入視窗
window.prompt("pleace input:","0");

//open方法
function open1()
{
    window.open("06js.html","","width=100,height=200");
}

//setInterval
window.setInterval("alert’123’;",);

//setTimeout
window.setTimeout("alert’123’;",);

//setInterval
function clear1(){
window.setInterval("alert’123’;",);}

function clear2(){
//setTimeout
window.setTimeout("alert’123’;",);}
 </script>
 </body>
</html>
           

繼續閱讀