JavaScript三种弹出框（alert、confirm、prompt），一次性全弄清！

在 JavaScript 中，我们有三种常用的弹出框：alert(), confirm() 和 prompt()。这些弹出框在前端开发中为我们提供了与用户进行交互的便捷方式。但是，许多初学者对这些弹出框的功能和用途感到困惑。本文将一次性详细解释这三种 JavaScript 弹出框。

1. alert() 弹出框

alert() 是最简单的 JavaScript 弹出框。它主要用于显示一条警告消息，并包含一个确定按钮，用于关闭这个弹出框。当你在代码中调用 alert() 函数时，浏览器会暂停执行脚本，并弹出一个包含消息文本的警告框。

alert("这是一条警告消息！");

当这段代码运行时，会弹出一个包含文本 “这是一条警告消息！” 的警告框。

2. confirm() 弹出框

confirm() 弹出框比 alert() 弹出框稍复杂一些。它主要用于显示一个包含消息文本和两个按钮（确定和取消）的对话框。这个弹出框在点击确定按钮时会返回 true，点击取消按钮时会返回 false。

if (confirm("你确定要继续吗？")) {
// 用户点击了确定按钮
} else {
// 用户点击了取消按钮
}

在这段代码中，如果用户点击了确定按钮，那么会执行第一个语句块；如果用户点击了取消按钮，那么会执行第二个语句块。

3. prompt() 弹出框

prompt() 弹出框是最复杂的 JavaScript 弹出框。它不仅包含一个消息文本，还包含一个文本输入框，允许用户输入他们的回答。当用户输入完毕并点击确定按钮时，这个弹出框会返回用户输入的文本。如果用户点击了取消按钮或关闭了这个弹出框，那么这个弹出框会返回 null。

var userAnswer = prompt("请输入你的名字", "Harry Potter");
if (userAnswer) {
// 用户输入了他们的名字并点击了确定按钮
console.log("你好，" + userAnswer + "！");
} else {
// 用户没有输入他们的名字或点击了取消按钮
console.log("你好，Harry Potter！");
}

在这段代码中，如果用户输入了他们的名字并点击了确定按钮，那么会打印一条包含他们名字的消息；否则，会打印一条默认消息。注意，第二个参数 “Harry Potter” 是默认文本，用户可以更改它。

结论：JavaScript 三种弹出框的用途和差异

JavaScript 的这三种弹出框各有用途。alert() 通常用于显示简单的警告消息，而无需用户进行交互。confirm() 用于需要用户确认或取消操作的场景，而 prompt() 则用于需要从用户获取输入的情况。了解这些差异可以帮助你更有效地使用它们来与用户进行交互。