JavaScript之消息对话框

最新推荐文章于 2024-05-31 10:04:55 发布

Katy_Pei

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量3.8k

点赞数 2

分类专栏：前端学习笔记文章标签： JavaScript 消息对话框 alert confirm prompt

本文链接：https://blog.csdn.net/aaaa99996666/article/details/54137843

版权

前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

效果图：

Katy_Pei

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之消息对话框

JavaScript弹起对话框的形式有以下三种：1.只是提醒，不能对脚本产生任何改变;2.一般用于确认，返回true或者false，所以可以用于if...else...判断;3.一个带输入的对话框，可以返回用户填入的字符串。第一种：alert()方法alert()是这三种对话框中最容易使用的一种，它可以用来简单而明了地将alert()括号内的文本信息显示在对话框中，我们将它
复制链接

扫一扫

专栏目录