JavaScript實現(xiàn)消息對話框
本文實例為大家分享了JavaScript實現(xiàn)消息對話框的具體代碼,供大家參考,具體內(nèi)容如下
JavaScript彈起對話框的形式有以下三種:
1.只是提醒,不能對腳本產(chǎn)生任何改變;
2.一般用于確認,返回true或者false,所以可以用于if...else...判斷;
3.一個帶輸入的對話框,可以返回用戶填入的字符串。
第一種:alert()方法
alert()是這三種對話框中最容易使用的一種,它可以用來簡單而明了地將alert()括號內(nèi)的文本信息顯示在對話框中,我們將它稱為警示對話框,要顯示的信息放置在括號內(nèi),該對話框上包含一個“確認”按鈕,用戶閱讀完所顯示的信息后,只需點擊該按鈕就可以關(guān)閉對話框。
代碼如下:
<!DOCTYPE HTML> <html> ? <head> ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? ? <title>alert</title> ? ? <script type="text/javascript"> ? ? ? function rec(){ ? ? ? ? var mychar="I love JavaScript"; ? ? ? ? alert(mychar); ? ? ? } ? ? </script> ? </head> ? <body> ? ? <input name="button" type="button" onClick="rec()" value="點擊我,彈出對話框" /> ? </body> </html>
效果圖如下:
第二種:confirm()方法
confirm()和alert()方法的使用十分相似,不同點是在confirm()的對話框上除了包含一個“確認”按鈕外,還有一個“取消”按鈕,這種對話框稱為確認對話框,在調(diào)用window對象的confirm()方法可以不寫window。
代碼如下:
<!DOCTYPE HTML> <html> ? <head> ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? ? <title>confirm</title> ? ? <script type="text/javascript"> ? ? function rec(){ ? ? ? var mymessage= confirm("你是男士嘛?"); ? ? ? if(mymessage==true){ ? ? ?? ? ?document.write("男"); ? ? ? }else{ ? ? ? ? document.write("女"); ? ? ? } ? ? } ? ? </script> ? </head> ? <body> ? ? <input name="button" type="button" onClick="rec()" value="點擊我,彈出確認對話框" /> ? </body> </html>
效果圖如下:
第三種:prompt()方法
前兩種方式僅僅顯示已有的信息,但用戶不能輸入自己的信息,所以如果需要用戶可以輸入自己的信息,就可以使用prompt(),prompt()不但可以顯示信息,而且還提供了一個文本框要求用戶鍵入自己的信息,同時她還包含“確認”或“取消”兩個按鈕,如果用戶“確認”按鈕,則prompt()方法返回用戶在文本框中輸入的內(nèi)容或者初始值,如果用戶單擊“取消”按鈕,則prompt()方法返回null,我們稱這種對話框為提示框,而且prompt()方法交互性最好。
代碼如下:
<!DOCTYPE HTML> <html> ? <head> ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? ? <title>prompt</title> ? ? <script type="text/javascript"> ? ? function rec(){ ?? ? ? ?var score; //score變量,用來存儲用戶輸入的成績值。 ?? ? ? ?score = ?prompt("你的這次考試的分數(shù)","請輸入成績") ? ? ? ? ? ?; ?? ? ? ?if(score>=90){ ?? ? ? ? ? document.write("你很棒!"); ?? ? ? ?}else if(score>=75){ ?? ? ? ? ? document.write("不錯吆!"); ?? ? ? ?}else if(score>=60){ ?? ? ? ? ? document.write("要加油!"); ? ? ? }else{ ? ? ? ? ?document.write("要努力了!"); ?? ? ? ?} ? ? } ? ? </script> ? </head> ? <body> ? ? <input name="button" type="button" onClick="rec()" value="點擊我,對成績做評價!" /> ? </body> </html>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序canvas繪制圓角base64圖片的實現(xiàn)
這篇文章主要介紹了微信小程序canvas繪制圓角base64圖片的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-08-08bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細介紹了bootstrap datetimepicker的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用,bootstrap-fileinput的
這篇文章主要介紹了關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用,bootstrap-fileinput的使用,需要的朋友可以參考下2017-05-05