本文详细介绍 JavaScript 中三种常用的消息对话框：alert、confirm 和 prompt。通过具体代码示例，演示如何创建警示、确认及带输入的提示框，并解析其返回值与交互逻辑，帮助开发者掌握基础的用户交互实现。
本文分享 JavaScript 实现消息对话框的具体代码，供读者参考。
JavaScript 消息对话框类型概述
JavaScript 中常见的对话框类型主要有以下三种：
1. 仅用于提醒用户，不会改变脚本执行流程； 2. 通常用于确认操作，返回 true 或 false，因此可结合 if...else... 进行判断； 3. 提供输入功能的对话框，允许用户返回输入的字符串。
alert() 警示对话框
第一种：alert() 方法
alert() 是这三种对话框中最基础且易于使用的一种。它用于在对话框中显示括号内的文本信息，通常被称为警示对话框。显示的信息位于括号内，对话框底部包含一个“确认”按钮。用户阅读完信息后，点击该按钮即可关闭对话框。 代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
function rec(){
var mychar="I love JavaScript";
alert(mychar);
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</html>运行效果如下：
confirm() 确认对话框
第二种：confirm() 方法
confirm() 的使用方式与 alert() 类似，主要区别在于 confirm() 对话框除了“确认”按钮外，还包含一个“取消”按钮，这类对话框称为确认对话框。调用 window 对象的 confirm() 方法时，可以省略 window 前缀。 代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage= confirm("你是男士嘛？");
if(mymessage==true){
document.write("男");
}else{
document.write("女");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>
</html>运行效果如下：
prompt() 提示对话框
第三种：prompt() 方法
前两种方法仅展示预设信息，用户无法输入内容。若需要用户输入信息，可使用 prompt()。该方法不仅能显示信息，还提供文本框供用户键入内容，并包含“确认”和“取消”两个按钮。如果用户点击“确认”，prompt() 返回文本框中的输入内容或初始值；如果点击“取消”，则返回 null。这种对话框称为提示框，其交互性最强。 代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
<script type="text/javascript">
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("你的这次考试的分数","请输入成绩") ;
if(score>=90){
document.write("你很棒!");
}else if(score>=75){
document.write("不错吆!");
}else if(score>=60){
document.write("要加油!");
}else{
document.write("要努力了!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
</body>
</html>运行效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。