ECMAScript/ES6对话框

精华

小牛编辑

179浏览

2023-03-14

JavaScript支持三种类型的对话框，分别是：警报，确认和提示。这些对话框可用于执行特定任务，例如发出警报，获取事件或输入的确认以及从用户获取输入。

下面来看看这几个对话框的用法。

1.警报对话框

用于向用户提供警告消息。它是JavaScript中使用最广泛的对话框之一。它只有一个“确定”按钮以继续并选择下一个任务。

可以通过一个示例来理解它，例如假设必须填写一个文本字段，但是用户没有为该文本字段提供任何输入值，那么可以使用警报框显示警告消息。

语法

alert(message);

下面通过以下示例来查看警报对话框的用法。

<html>   

<head>    
    <script type="text/javascript">   
        function show() {   
            alert("It is an Alert dialog box");   
        }   
    </script>   
</head>   

<body>   
    <center>   
        <h1>Hello World</h1>
        <h2>Welcome to XNTutor</h2>   
        <p>Click the following button </p>   
        <input type="button" value="单击我" onclick="show();" />   
    </center>   
</body>   

</html>

运行结果如下：

单击“单击我”按钮后，将获得以下输出：

2.确认对话框

它广泛用于征求用户对特定选项的意见。它包括两个按钮，分别是“确定”和“取消”。例如，假设要求用户删除一些数据，然后页面可以通过使用确认框确认该数据，以确定用户是否真的要删除。

如果用户单击“确定”按钮，则方法Confirm()返回true。但是，如果用户单击“取消”按钮，则Confirm()方法将返回false。

语法

confirm(message);

我们通过使用以下示例来演示如何使用对话框。

<html>   

<head>    
    <script type="text/javascript">   
        function show() {   
            var con = confirm ("It is a Confirm dialog box");   
            if(con == true) {   
                document.write ("用户想要继续操作");   
            }    
            else {   
                document.write ("用户不想要继续操作");   
            }   
        }   
    </script>   
</head>   

<body>   
    <center>   
        <h1>Hello World</h1>   
        <h2>Welcome to XNTutor</h2>   
        <p>Click the following button </p>   
        <input type="button" value="点击我" onclick="show();" />   
    </center>   
</body>   

</html>

运行结果如下：

3.提示对话框

需要弹出一个文本框以获取用户输入时，将使用提示对话框。因此，它使得能够与用户交互。

提示对话框中还有两个按钮，分别是“确定”和“取消”。用户需要在文本框中提供输入，然后单击“确定”。当用户单击“确定”按钮时，对话框将读取该值并将其返回给用户。但是在单击“取消”按钮时，prompt()方法将返回null。

语法

prompt(message, default_string);

示例代码

<html>    
<head>    
    <script type="text/javascript">   
        function show() {   
            var value = prompt("输入用户名: ", "你的用户名...");   
            document.write("Your Name is : " + value);   
        }   
    </script>   
</head>   

<body>   
    <center>   
        <h1>Hello World</h1>   
        <h2>Welcome to XNTutor</h2>   
        <p>Click the following button </p>   
        <input type="button" value="点击我" onclick="show();" />   
    </center>   
</body>   

</html>

运行结果如下：