ECMAScript/ES6对话框

ECMAScript/ES6对话框

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>

运行结果如下:

ECMAScript/ES6对话框

单击“单击我”按钮后,将获得以下输出:

ECMAScript/ES6对话框

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>

运行结果如下:

ECMAScript/ES6对话框

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>

运行结果如下:

ECMAScript/ES6对话框