2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > JavaScript弹出对话框的三种方式-alert()-confirm()-prompt()

JavaScript弹出对话框的三种方式-alert()-confirm()-prompt()

时间:2019-09-28 23:30:56

相关推荐

JavaScript弹出对话框的三种方式-alert()-confirm()-prompt()

一、alert()警告框(确定)

alert()方法是显示一条弹出提示消息和确认按钮的警告框。

需要注意的是 :

alert()是一个阻塞的函数,如果不点确认按钮,后面的内容就不会加载出来。

使用方式:

alert(“想要提示的文本内容”)

点击确定按钮之后

实现代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>alert是一个阻塞的函数</p><p>点击弹出框确定按钮之后这句话才会显示</p><script>alert("这是弹出框提示文本")</script></body></html>

二、confirm()弹出个确认框 (确定,取消)

confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。

如果点击"确定"返回true,否则返回false。

使用方式:

(1)不接收返回值:

confirm(“这样写可以直接显示,不接收返回值。”)

(2)接收返回值:

var x;

var r=confirm(“请按下按钮!”);

if (r==true){

x=“你按下的是"确定"按钮。”;

}

else{

x=“你按下的是"取消"按钮。”;

}

document.write(x)

第1种方式:

第2种方式:

实现代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>//使用方式1confirm("这种方式可直接显示,不接收返回值")//使用方式2var x;var r = confirm("请按下按钮!")if(r==true){x = "你按下的是\"确定\"按钮。";}else{x = "你按下的是\"取消\"按钮。"}document.write(x)</script></body></html>

三、prompt()提示框(弹出个输入框 让你输入东西)

prompt()方法是显示提示用户进行输入的对话框。

这个方法返回的是用户输入的字符串。

使用方式:

(1)不显示默认文本:

prompt(“开心吗?”); // 这个显示内容也可以不写,但就没有交互的意义了。

(2)显示默认文本:

var x;

var name=prompt(“请输入你的名字”,“Keafmd”);

if (name!=null && name!=""){

x="你好! " + name + “。”;

document.write(x)

}

第1种方式:

第2种方式:

实现代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>//使用方式1不显示默认文本prompt("高兴吗?")//使用方式2显示默认文本var x;var name = prompt("请输入你的名字","zxf");if(name!=null && name!=""){x = "你好" + name + "!";document.write(x)}</script></body></html>

prompt()和alert()配合使用:

实现代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>var name,age;name=prompt( "请问你叫什么名字?" ); /*在页面上弹出提示对话框,将用户输入的结果赋给变量name*/alert(name); //输出用户输入的信息age=prompt( "你今年多大了?" , "请在这里输入年龄" ); /*在页面上再一次弹出提示对话框,讲用户输入的信息赋给变量age*/alert(age) //输出用户输入的信息 </script></body></html>

alert()、confirm()、prompt()的区别和联系:

可以使用警告、确认和提示消息框来获得用户的输入。

(1)alert()警告框

alert是警告框,只有一个按钮“确定”无返回值,警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。语法:alert(“文本”)。

(2)confirm()确认框

confirm是确认框,两个按钮,确定或者取消,返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。语法:confirm(“文本”)。

(3)prompt()提示框

prompt是提示框,返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。语法:prompt(“文本”,“默认值”)。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。