溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript中常用的幾種彈出框

發(fā)布時間：2020-05-18 16:16:02 來源：億速云 閱讀：336 作者：栢白 欄目：web開發(fā)

JavaScript中常用的彈出框有warn()警示框、confirm()確認(rèn)彈出框以及prompt()提示框

在我們使用JavaScript的過程中有三種重要類型的彈出框可以幫助我們判斷事件，這些對話框可用于發(fā)出警報，或者對任何輸入進行確認(rèn)或從用戶那里獲得一種輸入，接下來在文章中將為大家詳細(xì)介紹這三種對話框的用法。

JavaScript中常用的幾種彈出框

警報彈出框

警報對話框主要用于向用戶發(fā)出警告消息，比如我們需要輸入字段時但是沒有輸入，這是我們可以使用警告對話框發(fā)出警告信息

警報框只提供一個“確定”按鈕來提示信息讓用戶確定并繼續(xù)

例

<body>
      <script type="text/javascript">
          function Warn() {
          	var user=document.getElementById("user").value;
          	if(user==""){
               alert ("用戶名不能為空");
           }      
            }
       
      </script>
      
   </head>
   <body> 
      <form>
用戶名：<input type="txt" id="user">
         <input type="button" value="確認(rèn)" onclick="Warn();" />
      </form>

當(dāng)輸入正確形式的用戶名時

JavaScript中常用的幾種彈出框

未輸入用戶名時

JavaScript中常用的幾種彈出框

確認(rèn)彈出框

確認(rèn)對話框主要是用于征得用戶對選項的同意，它顯示一個有帶兩個按鈕的對話框：取消和確認(rèn)

如果用戶單擊“確定”按鈕，則窗口方法confirm（）將返回true。如果用戶單擊“取消”按鈕，則confirm（）返回false

例：

 <script type="text/javascript">
   
            function getConfirmation(){
               var result= confirm("你想繼續(xù)登陸嗎");
               if( result== true ){
                  return true;
               }
               else{
                  return false;
               }
            }
 
      </script>
      
   </head>
   <body>
      
      <form>
      	用戶名：<input type="txt" id="user">
         <input type="button" value="確定" onclick="getConfirmation();" />
      </form>

效果圖如下：

JavaScript中常用的幾種彈出框

提示彈出框

當(dāng)想要彈出文本框以獲取用戶輸入時，提示對話框非常有用。因為它能使我們與用戶進行交互。用戶需要填寫該字段，然后單擊“確定”

此對話框使用prompt（）的方法顯示，該方法有兩個參數(shù)：

（1）要在文本框中顯示的標(biāo)簽和

（2）要在文本框中顯示的默認(rèn)字符串。

當(dāng)用戶單擊“確定”按鈕，則窗口方法提示符（）將從文本框中返回輸入的值，如果用戶單擊“取消”按鈕，則窗口方法prompt（）將返回null。

例：

<script type="text/javascript">
            function getValue(){
               var result = prompt("請輸入用戶名 : ", "username");
               document.write("你輸入的是 : " + result);
            }
      </script>
      
   </head>
   
   <body>
      <form>
         <input type="button" value="點擊" onclick="getValue();" />
      </form>

結(jié)果如下：

JavaScript中常用的幾種彈出框

輸入內(nèi)容后：

JavaScript中常用的幾種彈出框

以上就是JavaScript中常用的幾種彈出框的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手