快捷導航

JavaScript實現(xiàn)消息對話框

更新時間：2022年09月01日 11:13:28 作者：Katy_Pei

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)消息對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)消息對話框的具體代碼，供大家參考，具體內(nèi)容如下

JavaScript彈起對話框的形式有以下三種：

1.只是提醒，不能對腳本產(chǎn)生任何改變;
2.一般用于確認，返回true或者false，所以可以用于if...else...判斷;
3.一個帶輸入的對話框，可以返回用戶填入的字符串。

第一種：alert()方法

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

<!DOCTYPE HTML>
<html>
? <head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>alert</title>
? ? <script type="text/javascript">
? ? ? function rec(){
? ? ? ? var mychar="I love JavaScript";
? ? ? ? alert(mychar);
? ? ? }
? ? </script>
? </head>
? <body>
? ? <input name="button" type="button" onClick="rec()" value="點擊我，彈出對話框" />
? </body>
</html>

效果圖如下：

第二種：confirm()方法

confirm()和alert()方法的使用十分相似，不同點是在confirm()的對話框上除了包含一個“確認”按鈕外，還有一個“取消”按鈕，這種對話框稱為確認對話框，在調(diào)用window對象的confirm()方法可以不寫window。
代碼如下：

<!DOCTYPE HTML>
<html>
? <head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>confirm</title>
? ? <script type="text/javascript">
? ? function rec(){
? ? ? var mymessage= confirm("你是男士嘛？");
? ? ? if(mymessage==true){
? ? ?? ? ?document.write("男");
? ? ? }else{
? ? ? ? document.write("女");
? ? ? }
? ? }
? ? </script>
? </head>
? <body>
? ? <input name="button" type="button" onClick="rec()" value="點擊我，彈出確認對話框" />
? </body>
</html>

效果圖如下：

第三種：prompt()方法

前兩種方式僅僅顯示已有的信息，但用戶不能輸入自己的信息，所以如果需要用戶可以輸入自己的信息，就可以使用prompt()，prompt()不但可以顯示信息，而且還提供了一個文本框要求用戶鍵入自己的信息，同時她還包含“確認”或“取消”兩個按鈕，如果用戶“確認”按鈕，則prompt()方法返回用戶在文本框中輸入的內(nèi)容或者初始值，如果用戶單擊“取消”按鈕，則prompt()方法返回null，我們稱這種對話框為提示框，而且prompt()方法交互性最好。
代碼如下：

<!DOCTYPE HTML>
<html>
? <head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>prompt</title>
? ? <script type="text/javascript">
? ? function rec(){
?? ? ? ?var score; //score變量，用來存儲用戶輸入的成績值。
?? ? ? ?score = ?prompt("你的這次考試的分數(shù)","請輸入成績") ? ? ? ? ? ?;
?? ? ? ?if(score>=90){
?? ? ? ? ? document.write("你很棒!");
?? ? ? ?}else if(score>=75){
?? ? ? ? ? document.write("不錯吆!");
?? ? ? ?}else if(score>=60){
?? ? ? ? ? document.write("要加油!");
? ? ? }else{
? ? ? ? ?document.write("要努力了!");
?? ? ? ?}
? ? }
? ? </script>
? </head>
? <body>
? ? <input name="button" type="button" onClick="rec()" value="點擊我，對成績做評價!" />
? </body>
</html>

效果圖：