欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)消息對(duì)話框

 更新時(shí)間:2022年09月01日 11:13:28   作者:Katy_Pei  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)消息對(duì)話框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • ECharts地圖繪制和鉆取簡易接口詳解

    ECharts地圖繪制和鉆取簡易接口詳解

    這篇文章主要給大家介紹了關(guān)于ECharts地圖繪制和鉆取簡易接口的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用ECharts具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • JS中的prototype與面向?qū)ο蟮膶?shí)例講解

    JS中的prototype與面向?qū)ο蟮膶?shí)例講解

    JS中的prototype與面向?qū)ο蟮膶?shí)例講解,需要的朋友可以參考一下
    2013-05-05
  • 淺析Js中的單引號(hào)與雙引號(hào)問題

    淺析Js中的單引號(hào)與雙引號(hào)問題

    本文是對(duì)Js中單引號(hào)與雙引號(hào)的使用進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2013-11-11
  • 微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn)

    微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn)

    這篇文章主要介紹了微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • js+css實(shí)現(xiàn)計(jì)算器功能

    js+css實(shí)現(xiàn)計(jì)算器功能

    這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 小程序如何構(gòu)建骨架屏

    小程序如何構(gòu)建骨架屏

    最近在移動(dòng)端上面看到不同于菊花圖的加載方式,就是這篇文章需要分享的Skeleton Screen,中文稱之為"骨架屏",下面我們來簡單了解一下吧
    2019-05-05
  • 一文讀懂ES7中的javascript修飾器

    一文讀懂ES7中的javascript修飾器

    這篇文章主要給大家介紹了關(guān)于ES7中javascript修飾器的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用ES7具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • bootstrap datetimepicker日期插件使用方法

    bootstrap 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的

    這篇文章主要介紹了關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用,bootstrap-fileinput的使用,需要的朋友可以參考下
    2017-05-05
  • 簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁

    簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁

    這篇文章主要教大家簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評(píng)論