JavaScript彈出對話框的三種方式_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript彈出對話框的三種方式_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:08 PM

學過js的小夥伴會發現，我們在一些實例中用到了alert()方法、prompt()方法、prompt()方法，他們都是在螢幕上彈出一個對話框，並且在上面顯示括號內的內容，使用這種方法使得頁面的互動性更精彩，實際上我們經常會在進行網頁瀏覽時簡單這種類型的對話框，在用戶與應用程式進行雙向交流時，經常要用到對話框。

javascript的三種對話框是透過呼叫window物件的三個方法alert()，confirm()和prompt()來獲得，可以利用這些對話框來完成js的輸入和輸出，實作與使用者能互動的js程式碼。

今天小編就來簡單介紹一下js中的三種彈出對話框，小編先單獨對這幾個方法進行詳細講解，接著，將這幾個方法進行對比，好了，開始我們的js之旅吧`(*∩_∩*)′......

第一種：alert()方法

alert()方法是這三種對話方塊中最容易使用的一種，她可以用來簡單而明了地將alert()括號內的文字訊息顯示在對話方塊中，我們稱之為警示對話框，要顯示的資訊放置在括號內，該對話框上包含一個「確認」按鈕，使用者閱讀完所顯示的資訊後，只需按一下該按鈕即可關閉對話框。下面來看一個使用alert()方法的例子，程式碼如下圖所示：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联：山石岩下古木枯");//在页面上弹出上联
alert("下联：白水泉边少女妙");//在页面上弹出下联
</script>
</head>
</html>

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

接著，點擊“確認”按鈕後再顯示第二個對話框並顯示“白水泉邊少女妙！”，效果如下；

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

a、在<script>腳本區塊中兩次呼叫alert()方法；<br /> </script>

b、在每個alert()括號內分別添加了一段文字訊息，運行出現如下圖所示的頁面，當使用滑鼠點擊頁面上的「確定」按鈕後，出現第二個頁面，再點選「確定」按鈕後就關閉頁面上的對話框。注意：兩個對話方塊是分別顯示的，而不是一個覆蓋另一個，這是因為js實在執行完第一個alert()並等到使用者點擊「確認」按鈕之後才去執行第二個alert()的。

alert()是js的window物件的一個方法，呼叫時可以寫成window.alert()，也可以寫成alert()，功能都是產生一個帶有確認按鈕的對話框，上面顯示括號內的信息，

第二種：confirm()方法

confirm()方法與alert()方法的使用十分類似，不同點是在該種對話框上除了包含一個「確認」按鈕外，還有一個「取消」按鈕，這種對話框稱為確認對話框，在呼叫window物件的confirm()方法以及後面介紹的prompt()方法時也可以不寫window。下面來看一個關於confirm()的小範例,程式碼如下圖：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框
</script>
</head>
</html>

顯示效果如下：

分析這個小例子：

a、在<script>腳本區塊中加入confirm()方法、<br /> </script>

b、在confirm()括號內新增了一段文字訊息，運作效果如上圖所示，如果使用者點選「確認」按鈕，則confirm()方法會傳回true，如果使用者點選「取消」按鈕，則confirm()方法會傳回false，無論使用者選擇哪個按鈕，都會關閉對話框，而繼續執行javascript程式碼。點擊“確認”或“取消”按鈕都是關閉對話框，似乎沒有什麼區別，實際上，無論是單擊“確認”或“取消”按鈕都會返回一個布爾值，這樣就可以再幕後有一些js程式碼來發揮按鈕的作用，請大家看下面的例子，體會使用confirm()傳回布林值的妙處。程式碼如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var con;
con=confirm("你喜欢玫瑰花么&#63;"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
</script>
</head>
</html>

我们来分析一下这个小例子：

a、在<script>脚本块中声明了一个变量con。<br /> </script>

b、con=confirm()一句将confirm()方法返回的布尔值赋给con。

c、通过if语句来使用con的值，分别执行不同的语句；执行的效果如下：

如果单击页面的确认框上的“确定”按钮后，出现如下图所示的页面：

如果单击“取消”按钮，则出现如下图所示的页面：

第三种： prompt()方法

alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。

看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var name,age;
name=prompt("请问你叫什么名字&#63;"); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了&#63;","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
</script>
</head>
</html>

运行上面的程序，效果如下所示：

点击确定，会有这么惊喜nie：

我们再点击确定按钮：

再点击确定按钮：

分析一下这个小例子

a、在<script>脚本块中添加了两个prompt()方法。<br /> </script>

b、在第一个prompt()括号内添加了一段文本信息。

c、name=prompt()一句是将用户在文本框中输入的信息赋给变量name。

alert()、confirm()、prompt()的区别和联系：

警告框alert()

alert是警告框，只有一个按钮“确定”无返回值，警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert("文本")。

确认框confirm()

confirm是确认框，两个按钮，确定或者取消，返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm("文本")

提示框prompt()

prompt是提示框，返回输入的消息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt("文本","默认值")

本文主要介绍了javascript中的三种弹出对话框，分别是alert()方法，confirm()方法，prompt()方法，小编先对这几个方法进行了详细的单独介绍，紧接着，将这几个方法进行对比，除这三个弹出对话框之外，我们还可以使用document.write()直接将消息显示在页面上，BS学习，未完待续......同时感谢大家一直以来对脚本之家网站的支持！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles