頁面提示框-js

習(xí)過js的小伙伴會(huì)發(fā)現(xiàn)，我們?cè)谝恍?shí)例中用到了alert()方法、prompt()方法、prompt()方法，他們都是在屏幕上彈出一個(gè)對(duì)話框，并且在上面顯示括號(hào)內(nèi)的內(nèi)容，使用這種方法使得頁面的交互性更精彩，實(shí)際上我們經(jīng)常會(huì)在進(jìn)行網(wǎng)頁瀏覽時(shí)簡單這種類型的對(duì)話框，在用戶與應(yīng)用程序進(jìn)行雙向交流時(shí)，經(jīng)常要用到對(duì)話框。

javascript的三種對(duì)話框是通過調(diào)用window對(duì)象的三個(gè)方法alert()，confirm()和prompt()來獲得，可以利用這些對(duì)話框來完成js的輸入和輸出，實(shí)現(xiàn)與用戶能進(jìn)行交互的js代碼。

今天就來簡單介紹一下js中的三種彈出對(duì)話框

第一種：alert()方法

alert()方法是這三種對(duì)話框中最容易使用的一種，可以用來簡單而明了地將alert()括號(hào)內(nèi)的文本信息顯示在對(duì)話框中，我們將它稱為警示對(duì)話框，要顯示的信息放置在括號(hào)內(nèi)，該對(duì)話框上包含一個(gè)“確認(rèn)”按鈕，用戶閱讀完所顯示的信息后，只需單擊該按鈕就可以關(guān)閉對(duì)話框。下面來看一個(gè)使用alert()方法的例子，代碼如下所示：

<html> <head><title>編寫html頁面</title> <script language="javascript"> //JavaScript腳本標(biāo)注 alert("上聯(lián)：山石巖下古木枯");//在頁面上彈出上聯(lián) alert("下聯(lián)：白水泉邊少女妙");//在頁面上彈出下聯(lián) </script> </head> </html>

執(zhí)行上面的小例子，在頁面上彈出對(duì)話框并顯示一句話“上聯(lián)：山石巖下古木枯”，如下所示：

接著，單擊“確認(rèn)”按鈕后再顯示第二個(gè)對(duì)話框并顯示“白水泉邊少女妙！”，效果如下；

在頁面上彈出對(duì)話框并顯示一句話“上聯(lián)：山石巖下古木枯”，單擊“確認(rèn)”按鈕后再顯示第2個(gè)對(duì)話框并顯示“白水泉邊少女妙！”我們來分析一下這個(gè)小例子：

a、在<script>腳本塊中兩次調(diào)用alert()方法；

b、在每個(gè)alert()括號(hào)內(nèi)分別添加了一段文本信息，運(yùn)行出現(xiàn)如下圖所示的頁面，當(dāng)使用鼠標(biāo)單擊頁面上的“確定”按鈕后，出現(xiàn)第二個(gè)頁面，再點(diǎn)擊“確定”按鈕后就關(guān)閉頁面上的對(duì)話框。注意：兩個(gè)對(duì)話框是分別顯示的，而不是一個(gè)覆蓋另一個(gè)，這是因?yàn)閖s實(shí)在執(zhí)行完第一個(gè)alert()并等到用戶點(diǎn)擊“確認(rèn)”按鈕之后才去執(zhí)行第二個(gè)alert()的。

alert()是js的window對(duì)象的一個(gè)方法，調(diào)用時(shí)可以寫成window.alert()，也可以寫成alert()，功能都是產(chǎn)生一個(gè)帶確認(rèn)按鈕的對(duì)話框，上面顯示括號(hào)內(nèi)的信息，

第二種：confirm()方法

confirm()方法與alert()方法的使用十分類似，不同點(diǎn)是在該種對(duì)話框上除了包含一個(gè)“確認(rèn)”按鈕外，還有一個(gè)“取消”按鈕，這種對(duì)話框稱為確認(rèn)對(duì)話框，在調(diào)用window對(duì)象的confirm()方法以及后面介紹的prompt()方法時(shí)也可以不寫window。下面來看一個(gè)關(guān)于confirm()的小例子,代碼如下所示：

<html> <head> <title>編寫html頁面</title> <script language="javascript"> //js腳本標(biāo)注 confirm("上聯(lián)：一但重泥攔子路；下聯(lián)：兩岸夫子笑顏回"); //在頁面上彈出確認(rèn)對(duì)話框 </script> </head> </html>

顯示效果如下：

分析一下這個(gè)小例子：

a、在<script>腳本塊中添加confirm()方法、

b、在confirm()括號(hào)內(nèi)添加了一段文本信息，運(yùn)行效果如上圖所示，如果用戶單擊“確認(rèn)”按鈕，則confirm()方法會(huì)返回true，如果用戶單擊“取消”按鈕，則confirm()方法會(huì)返回false，無論用戶選擇哪個(gè)按鈕，都會(huì)關(guān)閉對(duì)話框，而繼續(xù)執(zhí)行javascript代碼。單擊“確認(rèn)”或“取消”按鈕都是關(guān)閉對(duì)話框，似乎沒有什么區(qū)別，實(shí)際上，無論是單擊“確認(rèn)”或“取消”按鈕都會(huì)返回一個(gè)布爾值，這樣就可以再幕后有一些js代碼來發(fā)揮按鈕的作用，請(qǐng)大家看下面的例子，體會(huì)使用confirm()返回布爾值的妙處。代碼如下：

<html> <head> <title>編寫html頁面</title> <script language="javascript"> //js腳本標(biāo)注 var con; con=confirm("你喜歡玫瑰花么?"); //在頁面上彈出對(duì)話框 if(con==true)alert("非常喜歡!"); else alert("不喜歡!"); </script> </head> </html>

我們來分析一下這個(gè)小例子：

a、在<script>腳本塊中聲明了一個(gè)變量con。

b、con=confirm()一句將confirm()方法返回的布爾值賦給con。

c、通過if語句來使用con的值，分別執(zhí)行不同的語句；執(zhí)行的效果如下：

如果單擊頁面的確認(rèn)框上的“確定”按鈕后，出現(xiàn)如下圖所示的頁面：

如果單擊“取消”按鈕，則出現(xiàn)如下圖所示的頁面：

第三種： prompt()方法

alert()方法和confirm()方法的使用十分類似，都是僅僅顯示已有的信息，但用戶不能輸入自己的信息，但是prompt()可以做到這點(diǎn)，她不但可以顯示信息，而且還提供了一個(gè)文本框要求用戶使用鍵盤輸入自己的信息，同時(shí)她還包含“確認(rèn)”或“取消”兩個(gè)按鈕，如果用戶“確認(rèn)”按鈕，則prompt()方法返回用戶在文本框中輸入的內(nèi)容（是字符串類型)或者初始值(如果用戶沒有輸入信息);如果用戶單擊“取消”按鈕，則prompt()方法返回null，我們稱這種對(duì)話框?yàn)樘崾究颍谶@三種對(duì)話框中，她的交互性最好。

看下面一個(gè)小例子：在頁面上兩次彈出提示對(duì)話框，使用戶能輸入有關(guān)信息，代碼如下：

<html> <head> <title>編寫html頁面</title> <script language="javascript"> //js腳本標(biāo)注 var name,age; name=prompt("請(qǐng)問你叫什么名字?"); /*在頁面上彈出提示對(duì)話框，將用戶輸入的結(jié)果賦給變量name*/ alert(name); //輸出用戶輸入的信息 age=prompt("你今年多大了?","請(qǐng)?jiān)谶@里輸入年齡"); /*在頁面上再一次彈出提示對(duì)話框，講用戶輸入的信息賦給變量age*/ alert(age)//輸出用戶輸入的信息 </script> </head> </html>

運(yùn)行上面的程序，效果如下所示：

點(diǎn)擊確定，會(huì)有這么驚喜nie：

我們?cè)冱c(diǎn)擊確定按鈕：

再點(diǎn)擊確定按鈕：

分析一下這個(gè)小例子

a、在<script>腳本塊中添加了兩個(gè)prompt()方法。

b、在第一個(gè)prompt()括號(hào)內(nèi)添加了一段文本信息。

c、name=prompt()一句是將用戶在文本框中輸入的信息賦給變量name。

alert()、confirm()、prompt()的區(qū)別和聯(lián)系：

警告框alert()

alert是警告框，只有一個(gè)按鈕“確定”無返回值，警告框經(jīng)常用于確保用戶可以得到某些信息。當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。語法：alert("文本")。

確認(rèn)框confirm()

confirm是確認(rèn)框，兩個(gè)按鈕，確定或者取消，返回true或false。確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。語法：confirm("文本")

提示框prompt()

prompt是提示框，返回輸入的消息，或者其默認(rèn)值提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。語法：prompt("文本","默認(rèn)值")

件處理

一事件源:任何一個(gè)HTML元素(節(jié)點(diǎn))body div button p a h1

二事件:你的操作

鼠標(biāo)點(diǎn)擊、頁面或圖像載入、鼠標(biāo)懸浮于頁面的某個(gè)熱點(diǎn)之上、在表單中選取輸入框、確認(rèn)表單、鍵盤按鍵

鼠標(biāo):

click 單擊

dblclick 雙擊

contextmenu(在body) 鼠標(biāo)右鍵菜單(火狐瀏覽器不支持,IE和360支持)

mouseover 放上(移入)

mouseout 離開(移出)

mousemove 移動(dòng)

mouseup 抬起

mousedown 按下

mouseenter 放上(移入)

mouseleave 離開(移出)

mouseover/mouseout與mousenter/onmouseleave區(qū)別: mouseover/mouseout不會(huì)參與冒泡, mousenter/onmouseleave參與冒泡

鍵盤:

keypress 鍵盤事件

keyup 抬起

keydown 按下

文檔:

load 加載完畢

error 加載失敗

unload 關(guān)閉

beforeunload 關(guān)閉之前

表單:

focus 焦點(diǎn)

blur 失去焦點(diǎn)

submit 提交事件

change 改變

其他:

scroll 滾動(dòng)

select 選擇

新增事件

oninput 事件在用戶輸入時(shí)觸發(fā)。該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時(shí)觸發(fā)。

三事件處理程序

第一種: 格式:<tag on事件="事件處理程序">

<a href="htp://www.baidu.com/" onclick="javascript：alert('You have Clicked the link!')">MYlinker</a>

注意:"javascript："可以省略

第二種: 格式:<tag on事件="事件處理函數(shù)">

<a href="htp://www.baidu.com/" onclick="Myclick()">MYlinker</a>
<script type="text/javascript">
function Myclick(){
alert('You have Clicked the link!');
}
</script>

注意:事件處理函數(shù)不分前后

第三種:

格式 <script type="text/javascript">

對(duì)象.on事件=事件處理程序

</script>

<script>
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('a');
};
};
</script>

注意: window.onload的意義,當(dāng)頁面加載的時(shí)候可以調(diào)用某些函數(shù);

對(duì)于第二種格式, 不需要window.onload語句, 而第三種格式必須要使用window.onload語句(也可以將事件處理程序放到DOM文檔底部);

四、實(shí)例

屏蔽鼠標(biāo)右鍵菜單(火狐瀏覽器不支持,IE和360支持)

<body oncontextmenu="return false;">
</body>
<body oncontextmenu="alert('010-123456789');return false">
</body>
<body oncontextmenu="return test()">
<script>
function test(){
alert('010-123456789');
return false;

</script>
</body>

兼容性最好的版本見 javascript|實(shí)例|屏蔽鼠標(biāo)右鍵

自動(dòng)將表單內(nèi)的英文轉(zhuǎn)換成大寫:

<input type="text" onkeyup="if(this.value!=this.value.toUpperCase()) this.value = this.value.toUpperCase() "/>

瀏覽器事件

瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、

瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus等。

<script type="text/javascript">
<!--
window.onload = function ()
{
var msg="\nwindow.load事件 : \n\n";
msg+=" 瀏覽器載入了文檔!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus事件 : \n\n";
msg+=" 瀏覽器取得了焦點(diǎn)!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur事件 : \n\n";
msg+=" 瀏覽器失去了焦點(diǎn)!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll事件 : \n\n";
msg+=" 用戶拖動(dòng)了滾動(dòng)條!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize事件 : \n\n";
msg+=" 用戶改變了窗口尺寸!";
alert(msg);
}
//-->
</script>

卸載事件使用：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸載事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您確定離開該網(wǎng)頁嗎？");
}
</script>
</head>
<body>
歡迎學(xué)習(xí)JavaScript。
</body>
</html>

多數(shù)瀏覽器內(nèi)部對(duì)象都擁有很多事件，下面將以表格的形式給出常用的事件及何時(shí)觸發(fā)這些事件。

JavaScript的常用事件

onabort 對(duì)象載入被中斷時(shí)觸發(fā)

onblur 元素或窗口本身失去焦點(diǎn)時(shí)觸發(fā)

onchange 改變<select>元素中的選項(xiàng)或其他表單元素失去焦點(diǎn)，并且在其獲取焦點(diǎn)后內(nèi)容發(fā)生過改變時(shí)觸發(fā)

onclick 單擊鼠標(biāo)左鍵時(shí)觸發(fā)。當(dāng)光標(biāo)的焦點(diǎn)在按鈕上，并按下回車鍵時(shí)，也會(huì)觸發(fā)該事件

ondblclick 雙擊鼠標(biāo)左鍵時(shí)觸發(fā)

onerror 出現(xiàn)錯(cuò)誤時(shí)觸發(fā)

onfocus 任何元素或窗口本身獲得焦點(diǎn)時(shí)觸發(fā)

onkeydown 鍵盤上的按鍵（包括Shift或Alt等鍵）被按下時(shí)觸發(fā)，如果一直按著某鍵，則會(huì)不斷觸發(fā)。當(dāng)返回false時(shí)，取消默認(rèn)動(dòng)作

onkeypress 鍵盤上的按鍵被按下，并產(chǎn)生一個(gè)字符時(shí)發(fā)生。也就是說，當(dāng)按下Shift或Alt等鍵時(shí)不觸發(fā)。如果一直按下某鍵時(shí)，會(huì)不斷觸發(fā)。

onkeyup 釋放鍵盤上的按鍵(鍵盤上所有按鍵)時(shí)觸發(fā)

onload 頁面完全載入后，在Window對(duì)象上觸發(fā)；所有框架都載入后，在框架集上觸發(fā)；

<img>標(biāo)記指定的圖像完全載入后，在其上觸發(fā)；或<object>標(biāo)記指定的對(duì)象完全載入后，在其上觸發(fā)

onmousedown 單擊任何一個(gè)鼠標(biāo)按鍵時(shí)觸發(fā)

onmousemove 鼠標(biāo)在某個(gè)元素上移動(dòng)時(shí)持續(xù)觸發(fā)

onmouseout 將鼠標(biāo)從指定的元素上移開時(shí)觸發(fā)

onmouseover 鼠標(biāo)移到某個(gè)元素上時(shí)觸發(fā)

onmouseup 釋放任意一個(gè)鼠標(biāo)按鍵時(shí)觸發(fā)

onreset 單擊重置按鈕時(shí)，在<form>上觸發(fā)

onresize 窗口或框架的大小發(fā)生改變時(shí)觸發(fā)

onscroll 在任何帶滾動(dòng)條的元素或窗口上滾動(dòng)時(shí)觸發(fā)

onselect 選中文本時(shí)觸發(fā)

onsubmit 單擊提交按鈕時(shí)，在<form>上觸發(fā)

onunload 頁面完全卸載后，在Window對(duì)象上觸發(fā)；或者所有框架都卸載后，在框架集上觸發(fā)

、下面是三種button點(diǎn)擊的方法。

btn.onclick=function(){}
btn.addEventListener("click",function(){})
function btclick(){} 前提是標(biāo)簽里有onclick="btclick()"

第1種方法參看javascript通過dom實(shí)現(xiàn)按鈕點(diǎn)擊事件。【303】
第3種方法參看最簡單的網(wǎng)頁按鈕單擊函數(shù)響應(yīng)事件，基于javascript。【302】

二、第2種方法就看我下面的表現(xiàn)了。

做個(gè)按鈕

圖1

圖2

加入javascript，dom取得按鈕元素。

圖3

添加click監(jiān)聽函數(shù)。

圖5

圖6

在線咨詢

上一篇：JavaScript中對(duì)話框的使用
下一篇：終于帶了點(diǎn)干貨！Android、iOS 又更新：這些功能都來了

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

頁面提示框-js

您的項(xiàng)目需求