JavaScript彈出框有哪些
JavaScript彈出框有：1、警告框，只有一個按鈕「確定」無回傳值，常用於確保使用者可以得到某些資訊；2、確認框，有「確定」和「取消」兩個按鈕，傳回true或false值，常用於使用戶可以驗證或接受某些資訊；3、提示框，回傳輸入的訊息。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
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()方法；</p><p>b、在每個alert()括號內分別添加了一段文字訊息，運行出現如下圖所示的頁面，當使用滑鼠點擊頁面上的「確定」按鈕後，出現第二個頁面，再點擊「確定」按鈕後就關閉頁面上的對話框。注意：兩個對話方塊是分別顯示的，而不是一個覆蓋另一個，這是因為js實在執行完第一個alert()並等到使用者點擊「確認」按鈕之後才去執行第二個alert()的。 </p><p>alert()是js的window物件的一個方法，呼叫時可以寫成window.alert()，也可以寫成alert()，功能都是產生一個帶有確認按鈕的對話框，上面顯示括號內的信息，</p><p>【推薦學習：<a href="https://www.php.cn/course/list/2.html" target="_blank">javascript高階教學</a>】</p><p><strong>#第二種：confirm()方法</strong></p><p> confirm()方法與alert()方法的使用十分類似，不同點是在該種對話框上除了包含一個「確認」按鈕外，還有一個「取消」按鈕，這種對話框稱為確認對話框，在呼叫window物件的confirm()方法以及後面介紹的prompt()方法時也可以不寫window。下面來看一個關於confirm()的小範例,程式碼如下圖：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><html> <head> <title>编写html页面</title> <script language="javascript"> //js脚本标注 confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框 </script> </head> </html></pre><div class="contentsignin">登入後複製</div></div><p>顯示效果如下：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/268/704/763/161795763180077JavaScript彈出框有哪些" class="lazy" title="161795763180077JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/></p>##分析這個小範例：<p></p>a、在<script>腳本區塊中加入confirm()方法、<p></p>b、在confirm()括號內加入了一段文字訊息，運作效果如上圖所示，如果用戶點選「確認」按鈕，則confirm()方法會傳回true，如果使用者點選「取消」按鈕，則confirm()方法會傳回false，無論使用者選擇哪個按鈕，都會關閉對話框，而繼續執行javascript程式碼。點擊“確認”或“取消”按鈕都是關閉對話框，似乎沒有什麼區別，實際上，無論是單擊“確認”或“取消”按鈕都會返回一個布爾值，這樣就可以再幕後有一些js程式碼來發揮按鈕的作用，請大家看下面的例子，體會使用confirm()傳回布林值的妙處。程式碼如下：<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><html> <head> <title>编写html页面</title> <script language="javascript"> //js脚本标注 var con; con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框 if(con==true)alert("非常喜欢!"); else alert("不喜欢!"); </script> </head> </html></pre><div class="contentsignin">登入後複製</div></div></p>我們來分析這個小例子：<p></p>a、在<script>腳本區塊中宣告了一個變數con。 <p></p>b、con=confirm()一句將confirm()方法傳回的布林值賦給con。 <p></p>c、透過if語句來使用con的值，分別執行不同的語句；執行的效果如下：<p></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/738/249/997/161795764032679JavaScript彈出框有哪些" class="lazy" title="161795764032679JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/></p>如果點選頁面的確認框上的「確定」按鈕後，出現如下圖所示的頁面：<p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/889/299/621/1617957644198830.png" class="lazy" title="1617957644198830.png" alt="JavaScript彈出框有哪些"/></p><p>如果单击“取消”按钮，则出现如下图所示的页面：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/930/744/839/161795764822891JavaScript彈出框有哪些" class="lazy" title="161795764822891JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/></p><p><strong>第三种： prompt()方法</strong></p><p>alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。</p><p>看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><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></pre><div class="contentsignin">登入後複製</div></div><p>运行上面的程序，效果如下所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/251/610/632/161795765680633JavaScript彈出框有哪些" class="lazy" title="161795765680633JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"></p> <p>点击确定，会有这么惊喜nie：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/610/774/956/161795766013843JavaScript彈出框有哪些" class="lazy" title="161795766013843JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"></p> <p>我们再点击确定按钮：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/536/273/530/161795766318481JavaScript彈出框有哪些" class="lazy" title="161795766318481JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"></p> <p>再点击确定按钮：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/489/290/460/161795767331543JavaScript彈出框有哪些" class="lazy" title="161795767331543JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"></p> <p>分析一下这个小例子</p> <p>a、在<script>脚本块中添加了两个prompt()方法。</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彈出框有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
