srcmini本文概述
JavaScript支持三种类型的对话框, 分别是警报, 确认和提示。这些对话框可用于执行特定任务, 例如发出警报, 获取事件或输入的确认以及从用户获取输入。
让我们讨论每个对话框。
警报对话框
用于向用户提供警告消息。它是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 srcmini</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>输出如下
成功执行以上代码后, 你将获得以下输出。
单击”单击我”按钮后, 将获得以下输出：
确认对话框
它广泛用于征求用户对特定选项的意见。它包括两个按钮, 分别是”确定”和”取消”。例如, 假设要求用户删除一些数据, 然后页面可以通过使用确认框确认该数据, 以确定他/她是否要删除它。
如果用户单击”确定”按钮, 则方法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 srcmini</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 srcmini</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>输出如下
成功执行上述代码后, 你将获得以下输出。
当你单击”单击我”按钮时, 将获得以下输出：
输入你的姓名, 然后单击确定按钮, 你将获得：
评论前必须登录！
注册