ES6教程

ES6 对话框

ES6 对话框

JavaScript 支持三种类型的对话框 a> 是警报、确认、和提示。这些对话框可用于执行特定任务,例如发出警报、获得事件或输入的确认以及获得用户的输入。
让我们讨论每个对话框。

警报对话框

用于向用户提供警告信息。它是 JavaScript 中使用最广泛的对话框之一。它只有一个'OK'按钮来继续并选择下一个任务。
我们可以通过一个例子来理解它,比如假设一个文本字段是必须填写的,但是用户没有为该文本字段提供任何输入值,然后我们可以使用警报框显示警告消息。
语法
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 lidihuo</h2> 
        <p>Click the following button </p> 
        <input type="button" value="Click Me" onclick="show();" /> 
    </center> 
</body> 
  
</html>
输出
成功执行以上代码后,会得到如下输出。
ES6 Dialog boxes
点击点击我按钮后,你会得到如下输出:
ES6 Dialog boxes

确认对话框

广泛用于取意见从用户对具体选项。它包括两个按钮,确定 和取消。举个例子,假设用户需要删除一些数据,那么页面可以通过是否要删除的确认框来确认。
如果用户点击OK 按钮,然后方法 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 ("User Want to continue"); 
            }  
            else { 
                document.write ("User does not want to continue"); 
            } 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Hello World :) :)</h1> 
        <h2>Welcome to lidihuo</h2> 
        <p>Click the following button </p> 
        <input type="button" value="Click Me" onclick="show();" /> 
    </center> 
</body> 
  
</html>
输出
成功执行以上代码后,会得到如下输出。
ES6 Dialog boxes
当你点击给定的按钮时,你会得到以下输出:
ES6 Dialog boxes
点击确定按钮后,会得到:
ES6 Dialog boxes
点击取消按钮,你会得到:
ES6 Dialog boxes

提示对话框

提示对话框在需要时使用弹出一个文本框来获取用户输入。因此,它可以与用户进行交互。
提示对话框也有两个按钮,分别是确定和取消。用户需要在文本框中提供输入,然后单击确定。当用户单击"确定"按钮时,对话框会读取该值并将其返回给用户。但是点击取消按钮后,prompt()方法返回null。
语法
prompt(message, default_string);
让我们通过下图来理解提示对话框。
示例
<html> 
  
<head>  
    <script type="text/javascript"> 
        function show() { 
            var value = prompt("Enter your Name : ", "Enter your name"); 
            document.write("Your Name is : " + value); 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Hello World :) :)</h1> 
        <h2>Welcome to lidihuo</h2> 
        <p>Click the following button </p> 
        <input type="button" value="Click Me" onclick="show();" /> 
    </center> 
</body> 
  
</html>
输出
执行上述代码成功后,会得到如下输出。
ES6 Dialog boxes
当您单击单击我按钮时,您将获得以下输出:
ES6 Dialog boxes
输入你的名字并点击确定按钮,你会得到:
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4