搜尋
首頁web前端js教程JavaScript彈出框有哪些

JavaScript彈出框有哪些

Apr 07, 2021 pm 06:09 PM
javascript彈出框

JavaScript彈出框有:1、警告框,只有一個按鈕「確定」無回傳值,常用於確保使用者可以得到某些資訊;2、確認框,有「確定」和「取消」兩個按鈕,傳回true或false值,常用於使用戶可以驗證或接受某些資訊;3、提示框,回傳輸入的訊息。

JavaScript彈出框有哪些

本教學操作環境: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>

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

JavaScript彈出框有哪些

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

JavaScript彈出框有哪些

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

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

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

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

【推薦學習:javascript高階教學

#第二種:confirm()方法

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

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

顯示效果如下:

JavaScript彈出框有哪些

##分析這個小範例:

a、在<script>腳本區塊中加入confirm()方法、<p>b、在confirm()括號內加入了一段文字訊息,運作效果如上圖所示,如果用戶點選「確認」按鈕,則confirm()方法會傳回true,如果使用者點選「取消」按鈕,則confirm()方法會傳回false,無論使用者選擇哪個按鈕,都會關閉對話框,而繼續執行javascript程式碼。點擊“確認”或“取消”按鈕都是關閉對話框,似乎沒有什麼區別,實際上,無論是單擊“確認”或“取消”按鈕都會返回一個布爾值,這樣就可以再幕後有一些js程式碼來發揮按鈕的作用,請大家看下面的例子,體會使用confirm()傳回布林值的妙處。程式碼如下:<p><pre class='brush:php;toolbar:false;'>&lt;html&gt; &lt;head&gt; &lt;title&gt;编写html页面&lt;/title&gt; &lt;script language=&quot;javascript&quot;&gt; //js脚本标注 var con; con=confirm(&quot;你喜欢玫瑰花么?&quot;); //在页面上弹出对话框 if(con==true)alert(&quot;非常喜欢!&quot;); else alert(&quot;不喜欢!&quot;); &lt;/script&gt; &lt;/head&gt; &lt;/html&gt;</pre>我們來分析這個小例子:<p>a、在<script>腳本區塊中宣告了一個變數con。 <p>b、con=confirm()一句將confirm()方法傳回的布林值賦給con。 <p>c、透過if語句來使用con的值,分別執行不同的語句;執行的效果如下:<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/738/249/997/161795764032679JavaScript彈出框有哪些?x-oss-process=image/resize,p_40" class="lazy" title="161795764032679JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/>如果點選頁面的確認框上的「確定」按鈕後,出現如下圖所示的頁面:<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/889/299/621/1617957644198830.png?x-oss-process=image/resize,p_40" class="lazy" title="1617957644198830.png" alt="JavaScript彈出框有哪些"/><p>如果单击“取消”按钮,则出现如下图所示的页面:<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/930/744/839/161795764822891JavaScript彈出框有哪些?x-oss-process=image/resize,p_40" class="lazy" title="161795764822891JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/><p><strong>第三种: prompt()方法<p>alert()方法和confirm()方法的使用十分类似,都是仅仅显示已有的信息,但用户不能输入自己的信息,但是prompt()可以做到这点,她不但可以显示信息,而且还提供了一个文本框要求用户使用键盘输入自己的信息,同时她还包含“确认”或“取消”两个按钮,如果用户“确认”按钮,则prompt()方法返回用户在文本框中输入的内容(是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮,则prompt()方法返回null,我们称这种对话框为提示框,在这三种对话框中,她的交互性最好。<p>看下面一个小例子:在页面上两次弹出提示对话框,使用户能输入有关信息,代码如下:<pre class='brush:php;toolbar:false;'>&lt;html&gt; &lt;head&gt; &lt;title&gt;编写html页面&lt;/title&gt; &lt;script language=&quot;javascript&quot;&gt; //js脚本标注 var name,age; name=prompt(&quot;请问你叫什么名字?&quot;); /*在页面上弹出提示对话框, 将用户输入的结果赋给变量name*/ alert(name); //输出用户输入的信息 age=prompt(&quot;你今年多大了?&quot;,&quot;请在这里输入年龄&quot;); /*在页面上再一次弹出提示对话框, 讲用户输入的信息赋给变量age*/ alert(age)//输出用户输入的信息 &lt;/script&gt; &lt;/head&gt; &lt;/html&gt;</pre><p>运行上面的程序,效果如下所示:<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/251/610/632/161795765680633JavaScript彈出框有哪些?x-oss-process=image/resize,p_40" class="lazy" title="161795765680633JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/><p>点击确定,会有这么惊喜nie:<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/610/774/956/161795766013843JavaScript彈出框有哪些?x-oss-process=image/resize,p_40" class="lazy" title="161795766013843JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/><p>我们再点击确定按钮:<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/536/273/530/161795766318481JavaScript彈出框有哪些?x-oss-process=image/resize,p_40" class="lazy" title="161795766318481JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/><p>再点击确定按钮:<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/489/290/460/161795767331543JavaScript彈出框有哪些?x-oss-process=image/resize,p_40" class="lazy" title="161795767331543JavaScript彈出框有哪些" alt="JavaScript彈出框有哪些"/><p>分析一下这个小例子<p>a、在<script>脚本块中添加了两个prompt()方法。<p>b、在第一个prompt()括号内添加了一段文本信息。<p>c、name=prompt()一句是将用户在文本框中输入的信息赋给变量name。<p><strong>alert()、confirm()、prompt()的区别和联系:<br/><p><strong>警告框alert()<p>alert是警告框,只有一个按钮“确定”无返回值,警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。语法:alert("文本")。<p><strong>确认框confirm()<p>confirm是确认框,两个按钮,确定或者取消,返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。语法:confirm("文本")<p><strong>提示框prompt()<p>prompt是提示框,返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。语法:prompt("文本","默认值")<p>更多编程相关知识,请访问:<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">编程视频!!</script>

以上是JavaScript彈出框有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),