JavaScript中常用的3種彈出提示框(alert、confirm、prompt)
三種提示框
- alert ()
- confirm()
- prompt ()
alert ()
alert()方法是顯示一條彈出提示消息和確認(rèn)按鈕的警告框。
需要注意的是 :alert()是一個(gè)阻塞的函數(shù),如果我們不點(diǎn)確認(rèn)按鈕,后面的內(nèi)容就不會(huì)加載出來。
使用方式:
alert("想要提示的文本內(nèi)容")
樣例代碼:
<!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。
使用方式:
不接收返回值:
confirm("這樣寫可以直接顯示,不接收返回值。")
接收返回值:
var x; var r=confirm("請(qǐng)按下按鈕!"); if (r==true){ x="你按下的是\"確定\"按鈕。"; } else{ x="你按下的是\"取消\"按鈕。"; } document.write(x)
樣例代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> // 使用方式一 confirm("這樣寫可以直接顯示,不接收返回值。") // 使用方式二 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)文本:
prompt("開心嗎?"); // 這個(gè)顯示內(nèi)容也可以不寫,但就沒有交互的意義了。
顯示默認(rèn)文本:
var x; var name=prompt("請(qǐng)輸入你的名字","Keafmd"); if (name!=null && person!=""){ x="你好! " + name + "。"; document.write(x) }
樣例代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> //方式一 prompt("開心嗎?"); // 這個(gè)顯示內(nè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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中setInterval()用法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中setInterval()用法的相關(guān)資料,setInterval()方法可按照指定的周期(以毫秒計(jì))來調(diào)用函數(shù)或計(jì)算表達(dá)式,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10javascript性能優(yōu)化之分時(shí)函數(shù)的介紹
本篇文章主要介紹了javascript性能優(yōu)化之分時(shí)函數(shù)的介紹,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03JS獲取iframe中marginHeight和marginWidth屬性的方法
這篇文章主要介紹了JS獲取iframe中marginHeight和marginWidth屬性的方法,涉及javascript操作iframe屬性的技巧,并分析了marginHeight和marginWidth屬性的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04Javascript控制div屬性動(dòng)態(tài)變化實(shí)例分析
這篇文章主要介紹了Javascript控制div屬性動(dòng)態(tài)變化,以實(shí)例形式較為詳細(xì)的分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript實(shí)現(xiàn)in-place思想的快速排序方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)in-place思想的快速排序方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06