第1節. 警告框
#JavaScript#在JavaScript中,如果需要彈出一段提示信息,則可以使用警告框來實現,警告框使用window.alert()方法來實現。顯示帶有一段消息和一個確認按鈕的警告框。
如下是一段完整的Html+JavaScript代碼段,用於彈出警告框的:
<!DOCTYPE html><html<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script type="text/javascript"> function alertPage() { if (Text1.value == "") { window.alert("用戶名不能為空!"); } } </script></head><body> 用戶名:<input id="Text1" type="text" /> <input id="Button1" type="button" value="彈出" onclick="alertPage()" /></body></html>
此段代碼的含義是如果文本框的值為空值,則會彈出一個警告框,提示:「用戶名不能為空!」。是觸發了按鈕引發的事件執行的JS代碼,判斷文本框是否為空值的。
在Chrome瀏覽器中查看一下運行結果:
當用戶名文本框中的值為空時,點擊「彈出」按鈕,此時就會將瀏覽器的警告框彈出來,並顯示一段提示信息。
注意:警告框上只有一個「確定」按鈕,看完提示信息後需要點擊「確定」按鈕取消警告框。
第2節. 確認框
確認框在JavaScript中,使用confirm()方法表示,顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
注意:confirm()會返回一個布爾類型的值,如果返回的值為true,則表示用戶點擊了「確定」按鈕,否則點擊了「取消」或關閉按鈕。
下面是一段JavaScript代碼,用來判斷是否刪除數據?這是在詢問用戶,用戶需要在確認框上做出選擇,要麼「確定」,要麼「取消」,只有這2種選擇。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script> function confirmPage() { var b = window.confirm("是否確認刪除?"); if (b == true) { document.write("確認需要刪除!") }else { document.write("不需要刪除!"); } } </script></head><body> <input id="Button1" type="button" onclick="confirmPage()" value="刪除" /></body></html>
這裡封裝了一個函數,通過按鈕的onclick事件觸發函數,去執行彈出確認框的代碼。在瀏覽器中查看一下運行結果是什麼樣子:
此時出現在頁面上的就是確認框,還有一段提示信息。在點擊「確定」和「取消」按鈕後,輸出的結果是不一樣的。這裡點擊「確定」按鈕,確實要刪除數據,執行後:
當用戶在確認框上做出選擇後,可以輸出文本信息,也可以轉到另外一個頁面上去,引導用戶進行下一步的操作。
第3節. 提示框
提示框使用prompt()方法表示,prompt()方法彈出一個可以讓用戶輸入文本信息的對話框,也是唯一個可以與用戶對話的框。
prompt()方法執行完成後,會將用戶輸入的文本值返回,這樣開發者就可以得到輸入的文本值,進行下一步判斷和操作。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script type="text/javascript"> function promptPage() { var x = window.prompt("請輸入您的姓名"); document.write(x); } </script></head><body> <input id="Button1" type="button" onclick="promptPage()" value="彈出" /></body></html>
在這段JS代碼中,要求用戶輸入自己的姓名,輸入完成後,並在頁面上顯示出來。
此時出現的提示框中有一個文本框,這個文本框是瀏覽器給我們的,讓用戶輸入一段內容。
當輸入的內容是「小明」後,就會在頁面上輸出。如果沒有在文本框中輸入任何內容,則接收的值為null。
第4節. 換行
在HTML中,可以使用的換行有:<br/>,還可以使用<p/>。
但是在JavaScript的所有彈窗中要使用換行,則要使用\n實現:
var x = window.prompt("請輸入您的姓名:\n包含全名");
在這裡,我們在提示信息中使用了\n來換行,也就是將提示信息分兩行顯示。這樣有助於分段,讓用戶更好的理解提示信息。
這個\n在警告框、確認框和提示框中都是可以使用的,起到一個折行顯示的效果。