三種提示框
- alert ()
- confirm()
- prompt ()
alert ()
alert()方法是顯示一條彈出提示消息和確認(rèn)按鈕的警告框。
需要注意的是 ：alert()是一個(gè)阻塞的函數(shù)，如果我們不點(diǎn)確認(rèn)按鈕，后面的內(nèi)容就不會(huì)加載出來(lái)。
使用方式：
|
1
|
alert("想要提示的文本內(nèi)容") |
樣例代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script> alert("這是彈出框提示文本") </script> <title></title> </head> <body> <p>alert是阻塞的函數(shù)</p> <p>這句話只有在確認(rèn)彈出框的提示文本后才會(huì)顯示</p> </body></html> |
效果截圖：
confirm()
confirm()方法是顯示一個(gè)含有指定消息和確認(rèn)和取消按鈕的確認(rèn)框。
如果點(diǎn)擊"確定"返回true，否則返回false。
使用方式：
不接收返回值：
|
1
|
confirm("這樣寫(xiě)可以直接顯示,不接收返回值。") |
接收返回值：
|
1
2
3
4
5
6
7
8
9
|
var x; var r=confirm("請(qǐng)按下按鈕!");if (r==true){ x="你按下的是\"確定\"按鈕。";}else{ x="你按下的是\"取消\"按鈕。";}document.write(x) |
樣例代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script> // 使用方式一 confirm("這樣寫(xiě)可以直接顯示,不接收返回值。") // 使用方式二 var x; var r=confirm("請(qǐng)按下按鈕!"); if (r==true){ x="你按下的是\"確定\"按鈕。"; } else{ x="你按下的是\"取消\"按鈕。"; } document.write(x) </script> <title></title> </head> <body> </body></html> |
效果截圖：
prompt ()
prompt()方法是顯示提示用戶進(jìn)行輸入的對(duì)話框。
這個(gè)方法返回的是用戶輸入的字符串。
使用方式：
不顯示默認(rèn)文本：
|
1
|
prompt("開(kāi)心嗎?"); // 這個(gè)顯示內(nèi)容也可以不寫(xiě)，但就沒(méi)有交互的意義了。 |
顯示默認(rèn)文本：
|
1
2
3
4
5
6
|
var x; var name=prompt("請(qǐng)輸入你的名字","Keafmd"); if (name!=null && person!=""){ x="你好! " + name + "。"; document.write(x)} |
樣例代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script> //方式一 prompt("開(kāi)心嗎?"); // 這個(gè)顯示內(nèi)容也可以不寫(xiě)，但就沒(méi)有交互的意義了。 //方式二 var x; var name=prompt("請(qǐng)輸入你的名字","Keafmd"); //顯示默認(rèn)文本 "Keafmd" if (name!=null && name!=""){ x="你好! " + name + "。"; document.write(x) } </script> <title></title> </head> <body> </body></html> |
效果截圖：
總結(jié)
到此這篇關(guān)于JavaScript中常用的3種彈出提示框(alert、confirm、prompt)的文章就介紹到這了,更多相關(guān)js彈出提示框(alert、confirm、prompt)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_43883917/article/details/109585430
