JavaScript常用的3种弹出框(提示框 alert/确认框 confirm/输入框 prompt)

下面是关于 JavaScript 常用的3种弹出框的完整攻略：

弹出框概述

弹出框是我们在使用 JavaScript 时非常常见的交互方式，它所表现的形式有很多，其中最常见的就是提示框、确认框和输入框，分别由函数 alert()、confirm() 和 prompt() 提供支持。在实际开发中，我们可以根据具体需求调用不同的弹出框，来满足我们对用户操作的提示和确认框的需求。

• 提示框(alert)：用来显示一段文本，用于提示用户信息，只有一个确定按钮。
• 确认框(confirm)：用来询问用户的确认或取消某个操作，包含两个按钮：确定和取消。
• 输入框(prompt)：可以让用户输入信息，并返回输入的内容，它包含一个输入框和确定和取消两个按钮。

下面详细介绍这三种弹出框的使用方式和示例。

Alert

alert（提示框）函数用于向用户显示一条包含信息和 OK 按钮的对话框，常用于提示用户操作结果等。

alert("This is an alert!");

执行上述代码后，将会弹出一个只带有一个 OK 按钮的提示框，显示内容为 "This is an alert!"。

示例2：提示框的标题

alert弹出框的标题可以使用document.title表示当前页面的标题

alert(document.title);

执行上述代码后，将会弹出一个只带有一个 OK 按钮的提示框，显示内容为当前页面的标题。

Confirm

confirm（确认框）函数用于向用户显示一个包含确认和取消按钮的对话框，通常用于确定或者取消某个操作。

var r = confirm("Did you find what you were looking for?");
if (r == true) {
  alert("Great!");
} else {
  alert("Sorry to hear that.");
}

执行上述代码后，将会弹出一个包含“确认”和“取消”两个按钮的对话框，显示内容为 “Did you find what you were looking for?”。当用户点击“确认”按钮时，将弹出一个提示框，显示 “Great!”；当用户点击“取消”按钮时，将弹出一个提示框，显示 “Sorry to hear that.”。

示例2：用confirm判断一个数字的正负

var num = prompt("请输入一个数字");
var r = confirm(num >= 0 ? "这个数字是正数" : "这个数字是负数");
if (r == true) {
  alert("你选择了确认按钮");
} else {
  alert("你选择了取消按钮");
}

执行上述代码后，将会弹出一个询问框，要求你输入一个数字，当你点击“确认”按钮时，将会弹出一个提示框，根据输入数字的正负性会显示不同的内容；当你点击“取消”按钮时，将会弹出一个提示框，显示 “你选择了取消按钮”。

Prompt

prompt（输入框）函数用于向用户显示一个包含文本输入字段、确认和取消按钮的对话框。

var name = prompt("What is your name?");
if (name != null && name != "") {
  alert("Hello " + name + "!");
} else {
  alert("You did not enter a name.");
}

执行上述代码后，将会弹出一个包含一个输入框和“确认”、“取消”两个按钮的对话框，要求用户输入自己的名字。当用户点击“确认”按钮时，将弹出一个提示框，显示 “Hello” 加上用户输入的名字；当用户点击“取消”按钮时，将弹出一个提示框，显示 “You did not enter a name.”。

示例2：将输入的数字平方

var num = prompt("请输入一个数字");
if (num != null && num != "") {
  alert("你输入的数字的平方是 " + num * num);
} else {
  alert("你没有输入任何数字。");
}

执行上述代码后，将会弹出一个包含一个输入框和“确认”、“取消”两个按钮的对话框，要求用户输入一个数字。当用户点击“确认”按钮时，将会弹出一个提示框，显示用户输入的数字的平方值；当用户点击“取消”按钮时，将弹出一个提示框，显示 “You did not enter a name.”。

结束语

上述就是 JavaScript 常用的3种弹出框的详细介绍和示例说明。在实际开发中，我们可以根据具体需求选择合适的弹出框来提示用户操作结果或者规范用户的操作。