快捷導(dǎo)航

JavaScript實(shí)現(xiàn)消息對(duì)話框

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

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

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

JavaScript彈起對(duì)話框的形式有以下三種：

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

第一種：alert()方法

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

<!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="點(diǎn)擊我，彈出對(duì)話框" />
? </body>
</html>

效果圖如下：

第二種：confirm()方法

confirm()和alert()方法的使用十分相似，不同點(diǎn)是在confirm()的對(duì)話框上除了包含一個(gè)“確認(rèn)”按鈕外，還有一個(gè)“取消”按鈕，這種對(duì)話框稱為確認(rèn)對(duì)話框，在調(diào)用window對(duì)象的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="點(diǎn)擊我，彈出確認(rèn)對(duì)話框" />
? </body>
</html>

效果圖如下：

第三種：prompt()方法

前兩種方式僅僅顯示已有的信息，但用戶不能輸入自己的信息，所以如果需要用戶可以輸入自己的信息，就可以使用prompt()，prompt()不但可以顯示信息，而且還提供了一個(gè)文本框要求用戶鍵入自己的信息，同時(shí)她還包含“確認(rèn)”或“取消”兩個(gè)按鈕，如果用戶“確認(rèn)”按鈕，則prompt()方法返回用戶在文本框中輸入的內(nèi)容或者初始值，如果用戶單擊“取消”按鈕，則prompt()方法返回null，我們稱這種對(duì)話框?yàn)樘崾究?，而且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變量，用來(lái)存儲(chǔ)用戶輸入的成績(jī)值。
?? ? ? ?score = ?prompt("你的這次考試的分?jǐn)?shù)","請(qǐng)輸入成績(jī)") ? ? ? ? ? ?;
?? ? ? ?if(score>=90){
?? ? ? ? ? document.write("你很棒!");
?? ? ? ?}else if(score>=75){
?? ? ? ? ? document.write("不錯(cuò)吆!");
?? ? ? ?}else if(score>=60){
?? ? ? ? ? document.write("要加油!");
? ? ? }else{
? ? ? ? ?document.write("要努力了!");
?? ? ? ?}
? ? }
? ? </script>
? </head>
? <body>
? ? <input name="button" type="button" onClick="rec()" value="點(diǎn)擊我，對(duì)成績(jī)做評(píng)價(jià)!" />
? </body>
</html>

效果圖：