JavaScript實(shí)現(xiàn)消息對(duì)話框
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)消息對(duì)話框的具體代碼,供大家參考,具體內(nèi)容如下
JavaScript彈起對(duì)話框的形式有以下三種:
1.只是提醒,不能對(duì)腳本產(chǎn)生任何改變;
2.一般用于確認(rèn),返回true或者false,所以可以用于if...else...判斷;
3.一個(gè)帶輸入的對(duì)話框,可以返回用戶填入的字符串。
第一種:alert()方法
alert()是這三種對(duì)話框中最容易使用的一種,它可以用來簡單而明了地將alert()括號(hào)內(nèi)的文本信息顯示在對(duì)話框中,我們將它稱為警示對(duì)話框,要顯示的信息放置在括號(hào)內(nèi),該對(duì)話框上包含一個(gè)“確認(rèn)”按鈕,用戶閱讀完所顯示的信息后,只需點(diǎn)擊該按鈕就可以關(guān)閉對(duì)話框。
代碼如下:
<!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="點(diǎn)擊我,彈出對(duì)話框" /> ? </body> </html>
效果圖如下:
第二種:confirm()方法
confirm()和alert()方法的使用十分相似,不同點(diǎn)是在confirm()的對(duì)話框上除了包含一個(gè)“確認(rèn)”按鈕外,還有一個(gè)“取消”按鈕,這種對(duì)話框稱為確認(rèn)對(duì)話框,在調(diào)用window對(duì)象的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="點(diǎn)擊我,彈出確認(rèn)對(duì)話框" /> ? </body> </html>
效果圖如下:
第三種:prompt()方法
前兩種方式僅僅顯示已有的信息,但用戶不能輸入自己的信息,所以如果需要用戶可以輸入自己的信息,就可以使用prompt(),prompt()不但可以顯示信息,而且還提供了一個(gè)文本框要求用戶鍵入自己的信息,同時(shí)她還包含“確認(rèn)”或“取消”兩個(gè)按鈕,如果用戶“確認(rèn)”按鈕,則prompt()方法返回用戶在文本框中輸入的內(nèi)容或者初始值,如果用戶單擊“取消”按鈕,則prompt()方法返回null,我們稱這種對(duì)話框?yàn)樘崾究?,而且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變量,用來存儲(chǔ)用戶輸入的成績值。 ?? ? ? ?score = ?prompt("你的這次考試的分?jǐn)?shù)","請(qǐng)輸入成績") ? ? ? ? ? ?; ?? ? ? ?if(score>=90){ ?? ? ? ? ? document.write("你很棒!"); ?? ? ? ?}else if(score>=75){ ?? ? ? ? ? document.write("不錯(cuò)吆!"); ?? ? ? ?}else if(score>=60){ ?? ? ? ? ? document.write("要加油!"); ? ? ? }else{ ? ? ? ? ?document.write("要努力了!"); ?? ? ? ?} ? ? } ? ? </script> ? </head> ? <body> ? ? <input name="button" type="button" onClick="rec()" value="點(diǎn)擊我,對(duì)成績做評(píng)價(jià)!" /> ? </body> </html>
效果圖:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript彈出對(duì)話框的三種方式
- 九種js彈出對(duì)話框的方法總結(jié)
- JavaScript寫的一個(gè)自定義彈出式對(duì)話框代碼
- javascript window.confirm確認(rèn) 取消對(duì)話框?qū)崿F(xiàn)代碼小結(jié)
- ExtJS Ext.MessageBox.alert()彈出對(duì)話框詳解
- js彈出框、對(duì)話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- Extjs Ext.MessageBox.confirm 確認(rèn)對(duì)話框詳解
- js彈出確認(rèn)是否刪除對(duì)話框
- 利用javascript打開模態(tài)對(duì)話框(示例代碼)
- JS實(shí)現(xiàn)彈出下載對(duì)話框及常見文件類型的下載
相關(guān)文章
JS中的prototype與面向?qū)ο蟮膶?shí)例講解
JS中的prototype與面向?qū)ο蟮膶?shí)例講解,需要的朋友可以參考一下2013-05-05微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用,bootstrap-fileinput的
這篇文章主要介紹了關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用,bootstrap-fileinput的使用,需要的朋友可以參考下2017-05-05簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁
這篇文章主要教大家簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12