Javascript中常用的彈出框有三種,分別是alert()、confirm()和prompt()。這三種彈出框可以幫助我們在頁面中進行一些交互操作,比如提示信息、確認操作以及獲取用戶的輸入。下面我們來分別介紹一下這三種彈出框的用法和應用場景。
1. alert()
使用alert()可以在頁面中彈出一個警告框,用來提示信息給用戶。下面是一個alert()的簡單示例:
alert("Hello World!");
執行這樣的代碼,頁面中就會彈出一個警告框,內容是"Hello World!"。alert()的應用場景比較廣泛,比如我們可以在用戶提交表單時,對表單數據進行一些檢查,如果發現不符合要求就彈出一個警告框進行提示。
2. confirm()
使用confirm()可以在頁面中彈出一個確認框,用來進行二次確認。下面是一個confirm()的簡單示例:
if(confirm("您確認刪除這個文件嗎?")){ // 用戶點擊了“確認”按鈕 alert("刪除成功!"); } else { // 用戶點擊了“取消”按鈕 alert("取消刪除操作!"); }
執行這樣的代碼,頁面中就會彈出一個確認框,內容是"您確認刪除這個文件嗎?",這里有兩個按鈕,一個是“確認”,一個是“取消”。如果用戶點擊了“確認”按鈕,就會執行后面的代碼塊,彈出一個提示框,內容是"刪除成功!";如果用戶點擊了“取消”按鈕,就會彈出另一個提示框,內容是"取消刪除操作!"。confirm()的應用場景也比較多,比如我們可以在用戶進行一些敏感操作時,先彈出一個確認框,以防誤操作造成損失。
3. prompt()
使用prompt()可以在頁面中彈出一個輸入框,用來獲取用戶的輸入。下面是一個prompt()的簡單示例:
var name = prompt("請輸入您的姓名:", "張三"); if(name != null && name != ""){ alert("您輸入的姓名是:" + name); } else { alert("您沒有輸入任何內容!"); }
執行這樣的代碼,頁面中就會彈出一個輸入框,內容是"請輸入您的姓名:",輸入框里面會默認顯示"張三",如果用戶點擊了“確認”按鈕,就會將用戶輸入的值賦給name變量,然后根據輸入的值彈出不同的提示框。如果用戶點擊了“取消”按鈕,就會跳過后面的代碼塊。prompt()的應用場景也比較多,比如在用戶進行注冊時,需要獲取用戶的姓名、郵箱等信息。
除了上述三種常用的彈出框之外,還有一些其他的彈出框,比如使用window.open()可以在頁面中彈出一個新窗口,使用alertify()可以定制美觀的提示框等等。不過,掌握了alert()、confirm()和prompt()這三種彈出框,基本上就能滿足我們在頁面中進行簡單交互的需求了。