首頁 > 文章 > web前端 > 使用事件解釋彈出訊息？

使用事件解釋彈出訊息？

PHPz轉載: 2023-08-24 22:37:021185瀏覽

使用事件解釋彈出訊息？

我們可以使用彈出框向應用程式使用者顯示彈出訊息。我們將在本教程中了解不同類型的 JavaScript 彈出框。

下面的 JavaScript 中提供了三種不同類型的彈出框。

警報框
確認框
提示框

下面我們將一一了解所有的彈出框。

警報框

我們可以使用 window.alert() 方法顯示警報框。它只是在彈出框中顯示訊息。

當我們需要向使用者提供一些訊息時，我們可以使用警報框。例如，當使用者登入應用程式時，它會顯示類似「您登入成功」的訊息。

文法

使用者可以依照以下語法在 JavaScript 中顯示警報框。

alert(message)

參數

訊息- 這是一則顯示在警報框中的訊息。

範例

在此範例中，當使用者按一下按鈕時，我們將呼叫 showAlert() 函數。 showAlert() 函數使用alert() 方法來顯示警報框。

在輸出中，使用者可以觀察到，當我們按下按鈕時，它會顯示警報框，其中訊息會作為參數傳遞。當我們按下警報框中的「確定」按鈕時，它就會消失。

<html>
<body>
   <h2> Showing the alert message using the <i> alert box. </i> </h2>
   <button onclick = "showAlert()"> Show Alert Message </button>
</body>
   <script>
      // function to show alert
      function showAlert() {
         alert("This is the important message");
      }
   </script>
</html>

確認框

當我們需要使用者確認時，我們可以使用確認框。例如，在刪除一些重要資料之前，我們需要先得到使用者的確認。

我們可以使用 window.confirm() 方法顯示確認框。確認框包含兩個按鈕，其中包含文字「確定」和「取消」。如果使用者按下取消按鈕，則傳回 false；否則為真。

文法

使用者可以依照以下語法在 JavaScript 中顯示確認框。

confirm(message);

參數

訊息- 這是一條顯示在確認框中的確認訊息。

傳回值

它根據使用者是否按下「確定」或「取消」按鈕返回 true 和 false 布林值。

範例

在這個範例中，我們使用了window物件的confirm()方法來顯示確認框。此外，根據使用者按下確認框的「確定」或「取消」按鈕，我們會在螢幕上向使用者顯示不同的訊息。

<html>
<body>
   <h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
   <p id = "output"> </p>
   <button onclick = "showConfirm()"> Show Confirm box </button>
</body>
   <script>
      let message = "Kindly confirm once by pressing the ok or cancel button!";
      // function to show confirm box
      function showConfirm() {

         // showing the confirm box with the message parameter
         let returnValue = confirm(message);
         let output = document.getElementById("output");

         // According to the returned boolean value, show the output
         if (returnValue) {
            output.innerHTML += "You pressed the ok button.";
         } else {
            output.innerHTML += "You pressed the cancel button.";
         }
      }
   </script>
</html>

提示框

提示框是 JavaScript 中顯示彈出訊息的第三種方式。提示框是alert()和確認框的進階版本。它在框中顯示訊息並接受使用者的輸入。此外，它還包含用於提交輸入值的確定和取消按鈕。

文法

使用者可以依照以下語法使用提示框在 JavaScript 中取得使用者輸入。

prompt(message, placeholder);

我們在上面的語法中呼叫了靜態prompt()方法。

參數

message - 這是一則顯示在輸入框上方的訊息。
佔位符- 這是在輸入框中顯示的文字。

傳回值

如果使用者按下確定按鈕，則傳回輸入值；否則為空。

範例

在此範例中，我們建立了 takeInput() 函數，該函數向使用者顯示提示方塊。我們使用提示框來取得使用者輸入的名稱。

當使用者輸入輸入值後按下確定按鈕時，我們會在螢幕上顯示使用者的輸入。

<html>
<body>
   <h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
   <p id = "output"> </p>
   <button onclick = "takeInput()"> Show Prompt box </button>
</body>
   <script>
      let message = "Enter your name";
      // function to take input using the prompt box
      function takeInput() {

         // showing the prompt with the message parameter
         let returnValue = prompt(message, "Shubham");
         let output = document.getElementById("output");
         if (returnValue) {
            output.innerHTML += "Your good name is " + returnValue;
         } else {
            output.innerHTML +=
            "You pressed the cancel button, or you entered the null value";
         }
      }
   </script>
</html>

我們已經透過本教程中的範例了解了所有三種不同的彈出框。如果我們只需要顯示訊息，我們可以使用警告框，如果我們只需要使用者確認，我們應該使用確認框。如果我們需要輸入值或在彈出框中確認某個值，我們應該使用提示框。

以上是使用事件解釋彈出訊息？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript 对象事件 alert prompt

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何從 JavaScript 陣列建立 HTML 清單？下一篇：如何從 JavaScript 陣列建立 HTML 清單？

看更多