一篇文章帶你了解JavaScript彈出框
作者：前端進階者
在JavaScript中，可以創建對話框或彈出窗口來與用戶進行交互。JavaScript具有三種不同類型的彈出框：警告框，確認框和提示框。
在JavaScript中，可以創建對話框或彈出窗口來與用戶進行交互。
JavaScript具有三種不同類型的彈出框：警告框，確認框和提示框。
一、警告框
警告框是最簡單的彈出框。它使可以向用戶顯示一條短消息。還包括“確定”按鈕，用戶必須單擊此“確定”按鈕才能繼續。
window.alert()
語法：
- window.alert("msg")
方法可以在沒有窗口的前綴被寫入。
- <!DOCTYPE html>
- <html>
- <title>項目</title>
- <body style="background-color: aqua;">
- <p>單擊按鈕以顯示警告彈出框：</p>
- <button onclick="myFunc()">alert</button>
- <script>
- function myFunc() {
- alert("Hello world!");
- }
- </script>
- </body>
- </html>
單擊按鈕以顯示警告彈出框：
二、確認框
如果希望用戶驗證或接受某些內容，通常會使用確認框。確認框看起來類似于警報框，但其中包含“取消”按鈕和“確定”按鈕。
如果用戶單擊“確定”，則該框返回true。如果用戶單擊“取消”，則該框返回false。
window.confirm()
語法：
- window.confirm("msg")
方法可以在沒有窗口的前綴被寫入。
- <!DOCTYPE html>
- <html>
- <title>項目</title>
- <body style="background-color: aqua;">
- <p>點擊按鈕顯示確認框:</p>
- <button onclick="myFunc()">點我試試</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>
三、提示框
如果希望用戶在進入頁面之前輸入值，通常會使用提示框。提示框包括文本輸入字段，“確定”和“取消”按鈕。
如果用戶單擊“確定”，則該框將返回輸入值。如果用戶單擊“取消”，則該框將返回null。
語法：
- window.prompt("msg", "defaultText")
1. window.prompt()
方法可以在沒有窗口的前綴被寫入。
- <!DOCTYPE html>
- <html>
- <title>項目</title>
- <body style="background-color: aqua;">
- <p>單擊按鈕以顯示提示框:</p>
- <button onclick="myFunc()">點擊我</button>
- <p id="output"></p>
- <script>
- function myFunc() {
- var name = prompt("請輸入你的名字", "Someone");
- if (name != null && name != "") {
- document.getElementById("output").innerHTML = "Hello " + name + "，你好";
- } else {
- document.getElementById("output").innerHTML = "用戶取消了提示!";
- }
- }
- </script>
- </body>
- </html>
注意：
prompt()方法返回的值始終是字符串。這意味著，如果用戶在輸入字段中輸入15，則返回字符串“ 15”而不是數字15。
2. 對話框中顯示換行符
要在對話框中顯示換行符，請使用換行符或換行符(\n); 反斜杠后跟字符n。
- <!DOCTYPE html>
- <html>
- <title>項目</title>
- <body style="background-color: aqua;"
- <p>點擊按鈕，彈出警告框</p>
- <button onclick="myFunc()">alert</button>
- <script>
- function myFunc() {
- alert("Hello\nHow are you?");
- }
- </script>
- </body>
- </html>
三、總結
本文基于JavaScript基礎，介紹了如何在瀏覽器中運用的各種彈框，警告框在實際的應用，如何自定義自己的提示框。通過用豐富的案例幫助大家更好理解。
希望大家可以根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。
責任編輯：武曉燕
來源：
前端進階學習交流
