一篇文章帶你了解JavaScript彈出框
在JavaScript中，可以創(chuàng)建對(duì)話框或彈出窗口來(lái)與用戶進(jìn)行交互。
JavaScript具有三種不同類型的彈出框：警告框，確認(rèn)框和提示框。
一、警告框
警告框是最簡(jiǎn)單的彈出框。它使可以向用戶顯示一條短消息。還包括“確定”按鈕，用戶必須單擊此“確定”按鈕才能繼續(xù)。
window.alert()
語(yǔ)法：
- window.alert("msg")
方法可以在沒(méi)有窗口的前綴被寫(xiě)入。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <p>單擊按鈕以顯示警告彈出框：</p>
- <button onclick="myFunc()">alert</button>
- <script>
- function myFunc() {
- alert("Hello world!");
- }
- </script>
- </body>
- </html>
單擊按鈕以顯示警告彈出框：
二、確認(rèn)框
如果希望用戶驗(yàn)證或接受某些內(nèi)容，通常會(huì)使用確認(rèn)框。確認(rèn)框看起來(lái)類似于警報(bào)框，但其中包含“取消”按鈕和“確定”按鈕。
如果用戶單擊“確定”，則該框返回true。如果用戶單擊“取消”，則該框返回false。
window.confirm()
語(yǔ)法：
- window.confirm("msg")
方法可以在沒(méi)有窗口的前綴被寫(xiě)入。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <p>點(diǎn)擊按鈕顯示確認(rèn)框:</p>
- <button onclick="myFunc()">點(diǎn)我試試</button>
- <p id="output"></p>
- <script>
- function myFunc() {
- var txt;
- var r = confirm("Press a button!");
- if (r == true) {
- txt = "按了確定！";
- } else {
- txt = "按了取消！!";
- }
- document.getElementById("output").innerHTML = txt
- }
- </script>
- </body>
- </html>
三、提示框
如果希望用戶在進(jìn)入頁(yè)面之前輸入值，通常會(huì)使用提示框。提示框包括文本輸入字段，“確定”和“取消”按鈕。
如果用戶單擊“確定”，則該框?qū)⒎祷剌斎胫?。如果用戶單?ldquo;取消”，則該框?qū)⒎祷豱ull。
語(yǔ)法：
- window.prompt("msg", "defaultText")
1. window.prompt()
方法可以在沒(méi)有窗口的前綴被寫(xiě)入。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <p>單擊按鈕以顯示提示框:</p>
- <button onclick="myFunc()">點(diǎn)擊我</button>
- <p id="output"></p>
- <script>
- function myFunc() {
- var name = prompt("請(qǐng)輸入你的名字", "Someone");
- if (name != null && name != "") {
- document.getElementById("output").innerHTML = "Hello " + name + "，你好";
- } else {
- document.getElementById("output").innerHTML = "用戶取消了提示!";
- }
- }
- </script>
- </body>
- </html>
注意：
prompt()方法返回的值始終是字符串。這意味著，如果用戶在輸入字段中輸入15，則返回字符串“ 15”而不是數(shù)字15。
2. 對(duì)話框中顯示換行符
要在對(duì)話框中顯示換行符，請(qǐng)使用換行符或換行符(\n); 反斜杠后跟字符n。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;"
- <p>點(diǎn)擊按鈕，彈出警告框</p>
- <button onclick="myFunc()">alert</button>
- <script>
- function myFunc() {
- alert("Hello\nHow are you?");
- }
- </script>
- </body>
- </html>
三、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了如何在瀏覽器中運(yùn)用的各種彈框，警告框在實(shí)際的應(yīng)用，如何自定義自己的提示框。通過(guò)用豐富的案例幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
使用JavaScript 語(yǔ)言，方便大家更好理解，希望對(duì)大家的學(xué)習(xí)有幫助。
