个性化阅读
专注于IT技术分析

JS创建对话框 – JavaScript教程

点击下载

上一章JavaScript教程请查看:JS窗口导航器navigator

在本教程中,你将学习如何在JavaScript中创建对话框。

创建对话框

在JavaScript中,你可以创建对话框或弹出窗口来与用户交互。你可以使用它们来通知用户,或者在继续之前接收某种用户输入。

你可以创建三种不同类型的对话框警告框、确认框和提示框(alert, confirm和prompt)。

这些对话框的外观是由操作系统和/或浏览器设置决定的,它们不能用CSS修改。对话框也是模态窗口;当显示一个对话框时,代码执行停止,只有在它被取消后才继续。

在下一节中,我们将详细讨论这些对话框。

创建警报对话框alert

警报对话框是最简单的对话框,它允许你向用户显示一条短消息,它还包括OK按钮,用户必须单击这个OK按钮才能继续。

你可以使用alert()方法创建警报对话框,在前几章中,你已经看到了许多警告示例。让我们再看一个例子:

var message = "点击OK继续.";
alert(message);
 
/* 下面的代码直到你取消之前的警报才会执行 */
alert("另一个alert.");

创建确认对话框

确认对话框允许用户确认或取消操作。确认对话框看起来类似于警报对话框,但它包含一个取消按钮和OK按钮。

你可以使用confirm()方法创建确认对话框,此方法仅返回一个布尔值(true或false),具体取决于用户单击OK或Cancel按钮,这就是为什么在使用它时,它的结果常常被分配给一个变量。

下面的示例将根据单击的按钮在浏览器中打印一些文本。

var result = confirm("你确定吗?");
 
if(result) {
    document.write("点击OK按钮!");
} else {
    document.write("点击取消按钮!");
}

创建提示对话框

提示对话框用于提示用户输入信息,提示对话框包含一个文本输入字段、一个OK和一个Cancel按钮。

可以使用prompt()方法创建提示对话框。此方法在用户单击OK按钮时返回输入字段中输入的文本,如果用户单击Cancel按钮则返回null。如果用户单击OK按钮而不输入任何文本,则返回一个空字符串。由于这个原因,在使用它时,它的结果通常被分配给一个变量。

下面的示例将打印你在单击OK按钮时输入的值。

var name = prompt("你叫什么名字?");
 
if(name.length > 0 && name != "null") {
    document.write("Hola, " + name);
} else {
    document.write("匿名者!");
}

prompt()方法返回的值总是字符串,这意味着如果用户在输入字段中输入10,将返回字符串“10”,而不是数字10。

因此,如果你想使用返回的值作为一个数字,你必须转换它或强制转换为number,就像这样:var age = number (prompt(“你几岁啦?”));

赞(0)
未经允许不得转载:srcmini » JS创建对话框 – JavaScript教程

评论 抢沙发

评论前必须登录!