JavaScript小工具13（BOM）
實用的 JavaScript 方案（涵蓋所有瀏覽器） 顯示瀏覽器視窗的高度和寬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p id="demo"></p> <script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="瀏覽器window寬度: " + w + ", 高度: " + h + "。" </script> </body> </html>
返回您的螢幕的可用寬度：
<script>
document.write("可用寬度: " + screen.availWidth);
</script>
返回您的螢幕的可用高度：
<script>
document.write("可用高度: " + screen.availHeight);
</script>
Window Location Assign
location.assign() 方法載入新的文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <head> <script> function newDoc(){ window.location.assign("http://www.w3cschool.cc") } </script> </head> <body> <input type="button" value="載入新文件" onclick="newDoc()"> </body> </html>
在頁面上建立後退按鈕：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <script> function goBack() { window.history.back() } </script> </head> <body> <input type="button" value="Back" onclick="goBack()"> </body> </html>
在頁面上建立一個向前的按鈕：
<script>
function goForward()
{
window.history.forward()
}
</script>Window Navigator
window.navigator 物件在編寫時可不使用 window 這個字首。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<div id="example"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬體平臺: " + navigator.platform + "</p>";
txt+= "<p>使用者代理: " + navigator.userAgent + "</p>";
txt+= "<p>使用者代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html> 警告!!!來自 navigator 物件的資訊具有誤導性，不應該被用於檢測瀏覽器版本，這是因為：
瀏覽器檢測由於 navigator 可誤導瀏覽器檢測，使用物件檢測可用來嗅探不同的瀏覽器。 由於不同的瀏覽器支援不同的物件，您可以使用物件來檢測瀏覽器。例如，由於只有 Opera 支援屬性 "window.opera"，您可以據此識別出 Opera。 例子：if (window.opera) {...some action...} |
確認框
確認框通常用於驗證是否接受使用者操作。
當確認卡彈出時，使用者可以點選 "確認" 或者 "取消" 來確定使用者操作。
當你點選 "確認", 確認框返回 true， 如果點選 "取消", 確認框返回 false。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點選按鈕，顯示確認框。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按鈕!");
if (r==true){
x="你按下了\"確定\"按鈕!";
}
else{
x="你按下了\"取消\"按鈕!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>提示框
提示框經常用於提示使用者在進入頁面前輸入某個值。
當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。
如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點選按鈕檢視輸入的對話方塊。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("請輸入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感覺如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>換行
彈窗使用 反斜槓 + "n"(\n) 來設定換行。
例項
alert("Hello\nHow are you?");
顯示當前時間。 setInterval() 方法設定每秒鐘執行一次程式碼，就是手錶一樣。
clearInterval() 方法用於停止 setInterval() 方法執行的函式程式碼。
語法
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window字首，直接使用函式clearInterval()。
要使用 clearInterval() 方法, 在建立計時方法時你必須使用全域性變數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>頁面上顯示時鐘：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
</body>
</html>setTimeout() 方法
語法
myVar= window.setTimeout("javascript function", milliseconds);
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 myVar 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。
setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg。
第二個引數指示從當前起多少毫秒後執行第一個引數。
如何停止執行?
clearTimeout() 方法用於停止執行setTimeout()方法的函式程式碼。
語法
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不使用window 字首。
要使用clearTimeout() 方法, 你必須在建立超時方法中（setTimeout）使用全域性變數:
myVar=setTimeout("javascript function",milliseconds);
如果函式還未被執行，你可以使用 clearTimeout() 方法來停止執行函式程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點選第一個按鈕等待3秒後出現"Hello"彈框。</p>
<p>點選第二個按鈕來阻止第一個函式執行。（你必須在3秒之前點選它）。</p>
<button onclick="myFunction()">點我</button>
<button onclick="myStopFunction()">停止彈框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>點選按鈕，輸出的文字將告訴你2秒，4秒，6秒已經過去了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<head>
<script>
function timedText(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2 秒"},2000);
var t2=setTimeout(function(){x.value="4 秒"},4000);
var t3=setTimeout(function(){x.value="6 秒"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="顯示文字時間!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>點選上面的按鈕，輸出的文字將告訴你2秒，4秒，6秒已經過去了。</p>
</body>
</html>JavaScript Cookie 例項
在以下例項中，我們將建立 cookie 來儲存訪問者名稱。
首先，訪問者訪問 web 頁面, 他將被要求填寫自己的名字。該名字會儲存在 cookie 中。
訪問者下一次訪問頁面時，他會看到一個歡迎的訊息。
在這個例項中我們會建立 3 個 JavaScript 函式:
- 設定 cookie 值的函式
- 獲取 cookie 值的函式
- 檢測 cookie 值的函式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<head>
<script>
/* 設定 cookie 值的函式
函式解析：
以下的函式引數中，cookie 的名稱為 cname，cookie 的值為 cvalue，並設定了 cookie 的過期時間 expires。
該函式設定了 cookie 名、cookie 值、cookie過期時間。
*/
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
/*
獲取 cookie 值的函式
建立一個函式使用者返回指定 cookie 的值：
函式解析：
cookie 名的引數為 cname。
建立一個文字變數用於檢索指定 cookie :cname + "="。
使用分號來分割 document.cookie 字串，並將分割後的字串陣列賦值給 ca (ca = document.cookie.split(';'))。
迴圈 ca 陣列 (i=0;i<ca.length;i++)，然後讀取陣列中的每個值，並去除前後空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果沒有找到 cookie, 返回 ""。
*/
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
/*
檢測 cookie 值的函式
最後，我們可以建立一個檢測 cookie 是否建立的函式。
如果設定了 cookie，將顯示一個問候資訊。
如果沒有設定 cookie，將會顯示一個彈窗用於詢問訪問者的名字，並呼叫 setCookie 函式將訪問者的名字儲存 365 天：
*/
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("歡迎 " + user + " 再次訪問");
}
else {
user = prompt("請輸入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>