ES6 对话框
ES6 对话框
JavaScript 支持三种类型的对话框 a> 是警报、确认、和提示。这些对话框可用于执行特定任务,例如发出警报、获得事件或输入的确认以及获得用户的输入。
让我们讨论每个对话框。
警报对话框
用于向用户提供警告信息。它是 JavaScript 中使用最广泛的对话框之一。它只有一个'OK'按钮来继续并选择下一个任务。
我们可以通过一个例子来理解它,比如假设一个文本字段是必须填写的,但是用户没有为该文本字段提供任何输入值,然后我们可以使用警报框显示警告消息。
语法
例子
让我们通过下面的例子来看看一个警告对话框的演示。
<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>
输出
成功执行以上代码后,会得到如下输出。
点击点击我按钮后,你会得到如下输出:
确认对话框
广泛用于取意见从用户对具体选项。它包括两个按钮,确定 和取消。举个例子,假设用户需要删除一些数据,那么页面可以通过是否要删除的确认框来确认。
如果用户点击OK 按钮,然后方法 confirm() 返回 true。但是如果用户点击取消按钮,confirm()方法返回false。
语法
示例
让我们通过下面的示例来理解这个对话框的演示。
<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>
输出
成功执行以上代码后,会得到如下输出。
当你点击给定的按钮时,你会得到以下输出:
点击确定按钮后,会得到:
点击取消按钮,你会得到:
提示对话框
提示对话框在需要时使用弹出一个文本框来获取用户输入。因此,它可以与用户进行交互。
提示对话框也有两个按钮,分别是确定和取消。用户需要在文本框中提供输入,然后单击确定。当用户单击"确定"按钮时,对话框会读取该值并将其返回给用户。但是点击取消按钮后,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>
输出
执行上述代码成功后,会得到如下输出。
当您单击单击我按钮时,您将获得以下输出:
输入你的名字并点击确定按钮,你会得到: