好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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()和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()方法返回用户在文本框中输入的内容或者初始值,如果用户单击[取消]按钮,则prompt()方法返回null,我们称这种对话框为提示框,而且prompt()方法交互性最好。
代码如下:

<!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>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

查看更多关于JavaScript实现消息对话框的详细内容...

  阅读:40次