天天看點

js彈出對話框的三種方式(轉)

原文位址:https://www.jb51.net/article/81376.htm

javascript的三種對話框是通過調用window對象的三個方法alert(),confirm()和prompt()來獲得,可以利用這些對話框來完成js的輸入和輸出,實作與使用者能進行互動的js代碼。

第一種:alert()方法

alert()方法是這三種對話框中最容易使用的一種,她可以用來簡單而明了地将alert()括号内的文本資訊顯示在對話框中,我們将它稱為警示對話框,要顯示的資訊放置在括号内,該對話框上包含一個“确認”按鈕,使用者閱讀完所顯示的資訊後,隻需單擊該按鈕就可以關閉對話框。下面來看一個使用alert()方法的例子,代碼如下所示:

1

2

3

4

5

6

7

8

9

<html>

<head>

<title>編寫html頁面</title>

<script language=

"javascript"

>

//JavaScript腳本标注

alert(

"上聯:山石岩下古木枯"

);

//在頁面上彈出上聯

alert(

"下聯:白水泉邊少女妙"

);

//在頁面上彈出下聯

</script>

</head>

</html>

執行上面的小例子,在頁面上彈出對話框并顯示一句話“上聯:山石岩下古木枯”,如下所示:

js彈出對話框的三種方式(轉)

接着,單擊“确認”按鈕後再顯示第二個對話框并顯示“白水泉邊少女妙!”,效果如下;

js彈出對話框的三種方式(轉)

在頁面上彈出對話框并顯示一句話“上聯:山石岩下古木枯”,單擊“确認”按鈕後再顯示第2個對話框并顯示“白水泉邊少女妙!”我們來分析一下這個小例子:

a、在<script>腳本塊中兩次調用alert()方法;

b、在每個alert()括号内分别添加了一段文本資訊,運作出現如下圖所示的頁面,當使用滑鼠單擊頁面上的“确定”按鈕後,出現第二個頁面,再點選“确定”按鈕後就關閉頁面上的對話框。 注意:兩個對話框是分别顯示的,而不是一個覆寫另一個,這是因為js實在執行完第一個alert()并等到使用者點選“确認”按鈕之後才去執行第二個alert()的。

alert()是js的window對象的一個方法,調用時可以寫成window.alert(),也可以寫成alert(),功能都是産生一個帶确認按鈕的對話框,上面顯示括号内的資訊,

第二種:confirm()方法

confirm()方法與alert()方法的使用十分類似,不同點是在該種對話框上除了包含一個“确認”按鈕外,還有一個“取消”按鈕,這種對話框稱為确認對話框,在調用window對象的confirm()方法以及後面介紹的prompt()方法時也可以不寫window。下面來看一個關于confirm()的小例子,代碼如下所示:

1

2

3

4

5

6

7

8

<html>

<head>

<title>編寫html頁面</title>

<script language=

"javascript"

>

//js腳本标注

confirm(

"上聯:一但重泥攔子路;下聯:兩岸夫子笑顔回"

);

//在頁面上彈出确認對話框

</script>

</head>

</html>

顯示效果如下:

js彈出對話框的三種方式(轉)

分析一下這個小例子:

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

b、在confirm()括号内添加了一段文本資訊,運作效果如上圖所示,如果使用者單擊“确認”按鈕,則confirm()方法會傳回true,如果使用者單擊“取消”按鈕,則confirm()方法會傳回false,無論使用者選擇哪個按鈕,都會關閉對話框,而繼續執行javascript代碼。單擊“确認”或“取消”按鈕都是關閉對話框,似乎沒有什麼差別,實際上,無論是單擊“确認”或“取消”按鈕都會傳回一個布爾值,這樣就 可以再幕後有一些js代碼來發揮按鈕的作用,請大家看下面的例子,體會使用confirm()傳回布爾值的妙處。代碼如下:

1

2

3

4

5

6

7

8

9

10

11

<html>

<head>

<title>編寫html頁面</title>

<script language=

"javascript"

>

//js腳本标注

var

con;

con=confirm(

"你喜歡玫瑰花麼?"

);

//在頁面上彈出對話框

if

(con==

true

)alert(

"非常喜歡!"

);

else

alert(

"不喜歡!"

);

</script>

</head>

</html>

我們來分析一下這個小例子:

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

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

c、通過if語句來使用con的值,分别執行不同的語句;執行的效果如下:

js彈出對話框的三種方式(轉)

如果單擊頁面的确認框上的“确定”按鈕後,出現如下圖所示的頁面:

js彈出對話框的三種方式(轉)

如果單擊“取消”按鈕,則出現如下圖所示的頁面:

js彈出對話框的三種方式(轉)

第三種: prompt()方法

alert()方法和confirm()方法的使用十分類似,都是僅僅顯示已有的資訊,但使用者不能輸入自己的資訊,但是prompt()可以做到這點,她不但可以顯示資訊,而且還提供了一個文本框要求使用者使用鍵盤輸入自己的資訊,同時她還包含“确認”或“取消”兩個按鈕,如果使用者“确認”按鈕,則prompt()方法傳回使用者在文本框中輸入的内容(是字元串類型)或者初始值(如果使用者沒有輸入資訊);如果使用者單擊“取消”按鈕,則prompt()方法傳回null,我們稱這種對話框為提示框,在這三種對話框中,她的互動性最好。

看下面一個小例子:在頁面上兩次彈出提示對話框,使使用者能輸入有關資訊,代碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<html>

<head>

<title>編寫html頁面</title>

<script language=

"javascript"

>

//js腳本标注

var

name,age;

name=prompt(

"請問你叫什麼名字?"

);

/*在頁面上彈出提示對話框,

将使用者輸入的結果賦給變量name*/

alert(name);

//輸出使用者輸入的資訊

age=prompt(

"你今年多大了?"

,

"請在這裡輸入年齡"

);

/*在頁面上再一次彈出提示對話框,

講使用者輸入的資訊賦給變量age*/

alert(age)

//輸出使用者輸入的資訊

</script>

</head>

</html>

運作上面的程式,效果如下所示:

js彈出對話框的三種方式(轉)

點選确定,會有這麼驚喜nie:

js彈出對話框的三種方式(轉)

我們再點選确定按鈕:

js彈出對話框的三種方式(轉)

再點選确定按鈕:

js彈出對話框的三種方式(轉)

分析一下這個小例子

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

b、在第一個prompt()括号内添加了一段文本資訊。

c、name=prompt()一句是将使用者在文本框中輸入的資訊賦給變量name。

alert()、confirm()、prompt()的差別和聯系:

警告框alert()

alert是警告框,隻有一個按鈕“确定”無傳回值,警告框經常用于確定使用者可以得到某些資訊。當警告框出現後,使用者需要點選确定按鈕才能繼續進行操作。文法:alert("文本")。

确認框confirm()

confirm是确認框,兩個按鈕,确定或者取消,傳回true或false。确認框用于使使用者可以驗證或者接受某些資訊。當确認框出現後,使用者需要點選确定或者取消按鈕才能繼續進行操作。如果使用者點選确認,那麼傳回值為 true。如果使用者點選取消,那麼傳回值為 false。文法:confirm("文本")

提示框prompt()

prompt是提示框,傳回輸入的消息,或者其預設值提示框經常用于提示使用者在進入頁面前輸入某個值。當提示框出現後,使用者需要輸入某個值,然後點選确認或取消按鈕才能繼續操縱。如果使用者點選确認,那麼傳回值為輸入的值。如果使用者點選取消,那麼傳回值為 null。文法:prompt("文本","預設值")

end.