详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)

你见过突然弹出警告窗口的网页吗?

这种吸引用户注意的显示功能称为对话框(弹出窗口)。

JavaScript 具有显示对话框的功能。

在本文中,我们将介绍显示对话框的"alert()"、"prompt()"、"confirm()"三种方法。

详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第1张

alert()方法

在alert后面写入字符串和数值等想要显示的值。

alert(要显示的值);

示例代码

alert('显示alert弹出窗口');

详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第2张

将出现一个弹出窗口,其中包含您输入的字符串。

alert的特点是“确定”按钮要求用户确认或同意。

prompt()方法

prompt(要显示的值, 初期値);

prompt用于显示一个带有提示信息,并且用户可以输入的对话框。您可以在第二个参数中设置初始值(初期値可选)。

示例代码

prompt('显示prompt弹出窗口', '请输入');

详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第3张

与alert不同的是,会显示一个输入字段,您可以在其中输入文本。作为第二个参数的字符串“请输入”被显示为输入字段的初始值,设置初始值是可选的。

让我们看看当我们在输入字段中输入一些文本并按下确认按钮时会发生什么。

例如,填写“我已输入”。

详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第4张详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第5张可以看到返回了字符串“我已输入”。

prompt的特点是能够让用户输入文本并返回输入值。返回值可用于条件分支等处理。

confirm()方法

与上述两个一样,在confirm中填写想要显示的值。

confirm(要显示的值);

示例代码

confirm('显示confirm弹出窗口');

详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第6张

Confirm 用于显示来自用户的确认,但与 alert 的区别在于它除了确认按钮之外还有一个取消按钮。

按下每个按钮会产生以下输出。

详解JavaScript对话框,3种对话框总结(alert、prompt、confirm)  第7张

按确认按钮返回 true,按取消按钮返回 false。

要确定用户单击了什么,您可以使用布尔值的结果并将其用于条件分支,例如 if 语句。

结语

这一次我们详解了JavaScript的对话框功能。

"alert()"、"prompt()"、"confirm()"可以用短代码实现,所以对于简单的操作确认很有用。

如果有希望用户确认的内容或输入的内容等,根据目的区分使用对话框功能吧。