BOM學習筆記(一)打開新鏈接四種方式、窗口屬性、定時器

BOM:專門操作瀏覽器窗口的對象

1、window對象充當2個角色:

      1. 全局對象

      2. 包含BOM常用對象   

3、打開新鏈接方式:

在HTML的<a>標籤的學習中,我們知道了target屬性和_self和_blank兩個值的區別

target-->目標窗口的名稱

    _self: 自動獲得當前窗口名稱(可返回)

    _blank: 創建一個新窗口,隨機生成一個不重複的名字

    窗口名:內存中同一個窗口名只能打開一個,後打開的,會替換先打開的

(官方解釋:name,聲明瞭新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該參數指定了一個已經存在的窗口,那麼 open() 方法就不再創建一個新窗口,而只是返回對指定窗口的引用。)

 

打開新鏈接方式四種方式:

      ① 在當前窗口打開新鏈接,可後退

 html: target="_self"

            js:[window.]open("url","_self")

      ② 在當前窗口打開新鏈接,禁止後退

            js:location.replace("url");//使用新鏈接,替換舊鏈接,同時打開新連接

      ③ 在新窗口打開新鏈接,可同時開多個

     html: target="_blank"

            js:[window.]open("url","_blank");

      ④ 在新窗口打開新鏈接,只能打開一個

         html: target="自定義窗口名"

js:[window.]open("url","自定義窗口名");

      

例、HTML:  <a href="javascript:fun1()" >在當前窗口打開,可後退</a><br>

    SCRIPT:  function fun1(){open("http://tmooc.cn","_self"); }

 

4、window對象的屬性:窗口大小與定位:

  大小:

①innerHeight/Width: 返回窗口的文檔顯示區的高度/寬度只讀屬性)    

outerHeight/Width: 返回窗口的外部高度/寬度只讀屬性

    ②screen.height/width: 桌面完整分辨率寬高

      screen.availHeight/availWidth: 去掉任務欄後剩餘分辨率的寬高

  調整大小:window.resizeTo(width,height)接受瀏覽器窗口新寬度和新高度

            window.resizeBy(width,height)接受新窗口與原窗口的寬度和高度

位置:

①pageYOffset/pageXOffset:設置或返回當前頁面相對於窗口顯示區左上角的 X/Y 位置。

  ② 窗口左上角x座標:window.screenLeft||window.screenX;

                y座標:window.screenTop||window.screenY;

  ③將窗口移動到指定座標:window.moveTo(x,y)

  ④事件發生時,鼠標相對於整個屏幕的座標:event.screenX|screenY

 

 

 

5、定時器:

 

setInterval() :週期性定時器,按照指定的週期(以毫秒計)來調用函數或計算表達式。方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。

setTimeout() :一次性定時器,在指定的毫秒數後調用函數或計算表達式。可以用setTimeout()實現setInterval()功能, 在一次性定時器的結尾,每次都重新啓動一個一次性定時器就達到一直執行的效果了

 

 

實現一次性/週期性定時器的三個步驟

    ①動畫的每一步要執行的任務(函數對象)

function step(){

      每一步要做的事情

/*一次性定時器需要根據條件判斷是否有必要繼續啓動下一個定時器*/       

 }

    ②將一步的任務放入定時器,反覆調用,並獲得存儲定時器的編號

   一次性:timer=setTimeout(step,間隔毫秒數|等待毫秒數)

       週期性:timer=setInterval (step,間隔毫秒數|等待毫秒數)

 

    ③清理定時器(必須用全局變量,臨時存儲定時器的編號)

        clearTimeout(timer)

        停止正在等待的定時器

 

 

例:

<!DOCTYPE html>

<html>

<head>

    <title>定時器</title>

</head>

<body>

<html>

<body>

<div id="clock" style="height:30px"></div>   

<button οnclick="window.clearInterval(int)">停止</button><!--清理定時器-->

<script type="text/javascript">

var int=window.setInterval("clock()",1000); 

/*第一個參數是要定時執行的函數,第二個是間隔時間(ms),執行完獲得一個返回值,用來停止定時器的*/

function clock(){ 

var d=new Date();     //獲得當前時間

var t=d.toLocaleTimeString();//將時間格式化

document.getElementById("clock").innerHTML=t;//將格式化後的時間寫入div

/*如果使用setTimeout()方法,需要把上邊setInterval改爲setTimeout,並在此處多一步var int=setTimeout("clock()",1000); */

}

</script>

</body>

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章