JavaScript--windows--準系統(一)

來源:互聯網
上載者:User

標籤:javascript   window   

window對象是BOM的核心,window對象指當前的瀏覽器視窗!

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>window對象</title><script type="text/javascript">function mysty(){alert("歡迎來到百度視窗");window.open("http://www.baidu.com/","_blank","width=600","height=400");}</script></head><body><form><input type="button" value="點擊我,開啟新視窗" onclick="mysty()" /></form></body></html>

**

JavaScript 計時器

**

在JavaScript中,我們可以在設定的時間間隔之後來執行代碼,而不是

在函數被調用後立即執行。
計時器類型:
一次性計時器:僅在指定的延遲時間之後觸發一次。
間隔性觸發計時器:每隔一定的時間間隔就觸發一次。
計時器方法:
setTimeout() 指定的延遲時間之後來執行代碼
clearTimeout() 取消setTimeout()設定
setInterval() 每隔指定的時間執行代碼
Clearinterval() 取消setinterval()設定

setInterval()
在執行時,從載入頁面後每隔指定的時間執行代碼。
文法:
setInterval(代碼,互動時間);
代碼:要調用的函數或要執行的代碼串。
互動時間:周期性執行或調用運算式之間的時間間隔,以毫秒計;
傳回值:
一個可以傳遞給clearInterval() 從而取消對代碼的周期性執行的值


調用函數格式(假設有一個clock()函數):
setInterval(“clock()”,1000);
或者
setInterval(clock,100);

顯示在瀏覽器上的時間設定:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>計時器</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>

取消計時器clearInterval()
clearInterval() 方法可取消由setInterval()設定的互動時間。
文法:
clearInterval(id_of_setInterval);
參數:
id_of_setInterval:由setInterval()返回的ID值。

每隔100毫秒調用clock()函數,並顯示時間。當點擊按鈕時,停止

時間,代碼如下:

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

計時器setTimeout()
setTimeout() 計時器,在載入順延強制時間後,去執行一次運算式,

僅執行一次。
文法:
setTimeout(代碼,延遲時間);
參數說明:
代碼:要調用的函數或要執行的代碼串。
延遲時間:在執行代碼前需等待的時間,以毫秒為單位。

當開啟網頁3秒後,再彈出一個提示框,代碼如下:

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

當按鈕start被點擊時,setTimeout()調用函數,在5秒後彈出一個提

示框。

<!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>

要建立一個運行於無窮迴圈中的計數器,我們需要編寫一個函數來調

用其自身。在下面的代碼,當按鈕被點擊後,輸入欄位便從0開始計數

<!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><input type="text" id="txt" /><input type="button" value="Start" onClick="numCount()" /></body></html>

取消計時器clearTimeout()

setTimeout() 和clearTimeout() 一起使用,停止計時器。

文法:
clearTimeout(id_of_setTimeout);

參數說明:
id_of_setTimeout:由setTimeout()返回的ID值。該值標識要取消的延遲

執行代碼塊。

<!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(timeCount,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 對象

history對象記錄了使用者曾經瀏覽過的頁面(URL),並可以實現瀏覽

器前進與後退相似導航的功能。

注意:從視窗被開啟的那一刻開始記錄,每個瀏覽器視窗,每個標籤

頁乃至每個架構,都有自己的history對象與特定的window對象關聯。
文法:
window.history.[屬性|方法]
window可以省略。

history對象屬性:
length 返回瀏覽器曆史列表中的URL數量。

history對象方法:
back() 載入history列表中的前一個URL。
forward() 載入history列表中的下一個URL。
go() 載入history列表中的某個具體的頁面。

使用length屬性,輸出當前視窗的瀏覽曆史總長度,代碼如下:

<script type="text/javascript">var HL = window.history.length;document.write(HL);</script>

返回前一個瀏覽的頁面
back()方法,載入history列表中的前一個URL。
文法:
window.history.back();
比如,返回前一個瀏覽的頁面,代碼如下:
window.history.back();
注意:等同於點擊瀏覽器的倒退按鈕。
back() 相當於go(-1),代碼如下:
window.history.go(-1);

返回下一個瀏覽的頁面
forward() 方法,載入history列表中下一個URL。
如果倒退之後,再想回到倒退之前瀏覽的頁面,則可以forward()方

法,代碼如下:
window.history.forward();
== window.history.go(1);

返回瀏覽曆史中的其他頁面
go()方法,根據當前所處的頁面,載入history列表中的某個具體的頁

面。
文法:
window.history.go(number);
參數:
1 前一個,go(1) = = forward();
0 當前頁面
-1 後一個,go(-1) = =back()
其他數值 要訪問的URL在history的URL列表中的相對位置

Location 對象

location用於擷取或設定表單的URL,並且可以用於解析URL。
文法:
location.[屬性|方法]

location 對象屬性:
hash 設定或返回從 # 開始的URL 。
host 設定或返回主機名稱和當前的URL的連接埠號碼。
hostname 設定或返回當前URL的主機名稱。
href 設定或返回完整的URL
pathname 設定或返回當前URL的路徑部分
port 設定或返回當前URL的連接埠號碼。
protocol 設定或返回當前URL的協議。
search 設定或返回從? 開始的URL(查詢部分)。

location 對象方法:
assign() 載入新的文檔
reload() 重新載入當前文檔。
replace() 用新的文檔替代當前文檔

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>location</title></head> <script type="text/javascript">        document.write(window.location.href); </script></head><body></body></html>

著作權聲明:本文為博主原創文章,未經博主允許不得轉載。

JavaScript--windows--準系統(一)

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.