首頁 web前端 js教程 javascript怎麼彈出對話框

javascript怎麼彈出對話框

May 11, 2021 am 11:07 AM
javascript

javascript彈出對話框的實作方法:1、透過alert()方法設定對話框;2、透過confirm()方法設定對話框;3、透過prompt()方法設定提示框。

javascript怎麼彈出對話框

本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript中的三個彈出對話框

        學習過js的小夥伴會發現,我們在一些實例中用到了alert()方法、prompt()方法、prompt()方法,他們都在螢幕上彈出一個對話框,並且在上面顯示括號內的內容,使用這種方法使得頁面的互動性更精彩,實際上我們經常會在進行網頁瀏覽時簡單這種類型的對話框,當使用者與應用程式進行雙向交流時,經常要使用對話框。 avascript的三種對話方塊是透過呼叫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、在#########        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、在

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1229
24
如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

See all articles