JavaScript有什么彈出框

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript有什么彈出框，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

澧縣網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

JavaScript彈出框有：1、警告框，只有一個(gè)按鈕“確定”無返回值，常用于確保用戶可以得到某些信息；2、確認(rèn)框，有“確定”和“取消”兩個(gè)按鈕，返回true或false值，常用于使用戶可以驗(yàn)證或者接受某些信息；3、提示框，返回輸入的消息。

javascript的三種對(duì)話框是通過調(diào)用window對(duì)象的三個(gè)方法alert()，confirm()和prompt()來獲得，可以利用這些對(duì)話框來完成js的輸入和輸出，實(shí)現(xiàn)與用戶能進(jìn)行交互的js代碼。

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

第一種：alert()方法

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

<html>
<head>
<title>編寫html頁面</title>
<script language="javascript"> //JavaScript腳本標(biāo)注
alert("上聯(lián)：山石巖下古木枯");//在頁面上彈出上聯(lián)
alert("下聯(lián)：白水泉邊少女妙");//在頁面上彈出下聯(lián)
</script>
</head>
</html>

執(zhí)行上面的小例子，在頁面上彈出對(duì)話框并顯示一句話“上聯(lián)：山石巖下古木枯”，如下所示：

JavaScript有什么彈出框

接著，單擊“確認(rèn)”按鈕后再顯示第二個(gè)對(duì)話框并顯示“白水泉邊少女妙！”，效果如下；

JavaScript有什么彈出框

在頁面上彈出對(duì)話框并顯示一句話“上聯(lián)：山石巖下古木枯”，單擊“確認(rèn)”按鈕后再顯示第2個(gè)對(duì)話框并顯示“白水泉邊少女妙！”我們來分析一下這個(gè)小例子：

a、在<script>腳本塊中兩次調(diào)用alert()方法；

b、在每個(gè)alert()括號(hào)內(nèi)分別添加了一段文本信息，運(yùn)行出現(xiàn)如下圖所示的頁面，當(dāng)使用鼠標(biāo)單擊頁面上的“確定”按鈕后，出現(xiàn)第二個(gè)頁面，再點(diǎn)擊“確定”按鈕后就關(guān)閉頁面上的對(duì)話框。注意：兩個(gè)對(duì)話框是分別顯示的，而不是一個(gè)覆蓋另一個(gè)，這是因?yàn)閖s實(shí)在執(zhí)行完第一個(gè)alert()并等到用戶點(diǎn)擊“確認(rèn)”按鈕之后才去執(zhí)行第二個(gè)alert()的。

alert()是js的window對(duì)象的一個(gè)方法，調(diào)用時(shí)可以寫成window.alert()，也可以寫成alert()，功能都是產(chǎn)生一個(gè)帶確認(rèn)按鈕的對(duì)話框，上面顯示括號(hào)內(nèi)的信息，

第二種：confirm()方法

confirm()方法與alert()方法的使用十分類似，不同點(diǎn)是在該種對(duì)話框上除了包含一個(gè)“確認(rèn)”按鈕外，還有一個(gè)“取消”按鈕，這種對(duì)話框稱為確認(rèn)對(duì)話框，在調(diào)用window對(duì)象的confirm()方法以及后面介紹的prompt()方法時(shí)也可以不寫window。下面來看一個(gè)關(guān)于confirm()的小例子,代碼如下所示：

<html>
<head>
<title>編寫html頁面</title>
<script language="javascript"> //js腳本標(biāo)注
confirm("上聯(lián)：一但重泥攔子路；下聯(lián)：兩岸夫子笑顏回"); //在頁面上彈出確認(rèn)對(duì)話框
</script>
</head>
</html>

顯示效果如下：

JavaScript有什么彈出框

分析一下這個(gè)小例子：

a、在<script>腳本塊中添加confirm()方法、

b、在confirm()括號(hào)內(nèi)添加了一段文本信息，運(yùn)行效果如上圖所示，如果用戶單擊“確認(rèn)”按鈕，則confirm()方法會(huì)返回true，如果用戶單擊“取消”按鈕，則confirm()方法會(huì)返回false，無論用戶選擇哪個(gè)按鈕，都會(huì)關(guān)閉對(duì)話框，而繼續(xù)執(zhí)行javascript代碼。單擊“確認(rèn)”或“取消”按鈕都是關(guān)閉對(duì)話框，似乎沒有什么區(qū)別，實(shí)際上，無論是單擊“確認(rèn)”或“取消”按鈕都會(huì)返回一個(gè)布爾值，這樣就可以再幕后有一些js代碼來發(fā)揮按鈕的作用，請(qǐng)大家看下面的例子，體會(huì)使用confirm()返回布爾值的妙處。代碼如下：

<html>
<head>
<title>編寫html頁面</title>
<script language="javascript"> //js腳本標(biāo)注
var con;
con=confirm("你喜歡玫瑰花么?"); //在頁面上彈出對(duì)話框
if(con==true)alert("非常喜歡!");
else alert("不喜歡!");
</script>
</head>
</html>

我們來分析一下這個(gè)小例子：

a、在<script>腳本塊中聲明了一個(gè)變量con。

b、con=confirm()一句將confirm()方法返回的布爾值賦給con。

c、通過if語句來使用con的值，分別執(zhí)行不同的語句；執(zhí)行的效果如下：

JavaScript有什么彈出框

如果單擊頁面的確認(rèn)框上的“確定”按鈕后，出現(xiàn)如下圖所示的頁面：

JavaScript有什么彈出框

如果單擊“取消”按鈕，則出現(xiàn)如下圖所示的頁面：

JavaScript有什么彈出框

第三種： prompt()方法

alert()方法和confirm()方法的使用十分類似，都是僅僅顯示已有的信息，但用戶不能輸入自己的信息，但是prompt()可以做到這點(diǎn)，她不但可以顯示信息，而且還提供了一個(gè)文本框要求用戶使用鍵盤輸入自己的信息，同時(shí)她還包含“確認(rèn)”或“取消”兩個(gè)按鈕，如果用戶“確認(rèn)”按鈕，則prompt()方法返回用戶在文本框中輸入的內(nèi)容（是字符串類型)或者初始值(如果用戶沒有輸入信息);如果用戶單擊“取消”按鈕，則prompt()方法返回null，我們稱這種對(duì)話框?yàn)樘崾究颍谶@三種對(duì)話框中，她的交互性最好。

看下面一個(gè)小例子：在頁面上兩次彈出提示對(duì)話框，使用戶能輸入有關(guān)信息，代碼如下：

<html>
<head>
<title>編寫html頁面</title>
<script language="javascript"> //js腳本標(biāo)注
var name,age;
name=prompt("請(qǐng)問你叫什么名字?"); /*在頁面上彈出提示對(duì)話框，
將用戶輸入的結(jié)果賦給變量name*/
alert(name); //輸出用戶輸入的信息
age=prompt("你今年多大了?","請(qǐng)?jiān)谶@里輸入年齡"); /*在頁面上再一次彈出提示對(duì)話框，
講用戶輸入的信息賦給變量age*/
alert(age)//輸出用戶輸入的信息
</script>
</head>
</html>

運(yùn)行上面的程序，效果如下所示：

JavaScript有什么彈出框

點(diǎn)擊確定，會(huì)有這么驚喜nie：

JavaScript有什么彈出框

我們?cè)冱c(diǎn)擊確定按鈕：

JavaScript有什么彈出框

再點(diǎn)擊確定按鈕：

JavaScript有什么彈出框

分析一下這個(gè)小例子

a、在<script>腳本塊中添加了兩個(gè)prompt()方法。

b、在第一個(gè)prompt()括號(hào)內(nèi)添加了一段文本信息。

c、name=prompt()一句是將用戶在文本框中輸入的信息賦給變量name。

alert()、confirm()、prompt()的區(qū)別和聯(lián)系：

警告框alert()

alert是警告框，只有一個(gè)按鈕“確定”無返回值，警告框經(jīng)常用于確保用戶可以得到某些信息。當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。語法：alert("文本")。

確認(rèn)框confirm()

confirm是確認(rèn)框，兩個(gè)按鈕，確定或者取消，返回true或false。確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。語法：confirm("文本")

提示框prompt()

prompt是提示框，返回輸入的消息，或者其默認(rèn)值提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。語法：prompt("文本","默認(rèn)值")

關(guān)于“JavaScript有什么彈出框”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享標(biāo)題：JavaScript有什么彈出框
本文來源：http://jinyejixie.com/article48/ipeihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、定制開發(fā)、響應(yīng)式網(wǎng)站、電子商務(wù)、微信公眾號(hào)、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JavaScript有什么彈出框