js中三种弹出框[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

javascript的三种对话框是通过调用window对象的三个方法alert()，confirm()和prompt()来获得，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。

今天小编就来简单介绍一下js中的三种弹出对话框，小编先单独对这几个方法进行详细讲解，接着，将这几个方法进行对比，好了，开始我们的js之旅吧`(*∩_∩*)′……

第一种：alert()方法

alert()方法是这三种对话框中最容易使用的一种，她可以用来简单而明了地将alert()括号内的文本信息显示在对话框中，我们将它称为警示对话框，要显示的信息放置在括号内，该对话框上包含一个“确认”按钮，用户阅读完所显示的信息后，只需单击该按钮就可以关闭对话框。下面来看一个使用alert()方法的例子，代码如下所示：

         <html>
        
         <head>
        
         <title>编写html页面</title>
        
         <script language=

         "javascript"

         > 

         //JavaScript脚本标注
        
         alert(

         "上联：山石岩下古木枯"

         );

         //在页面上弹出上联
        
         alert(

         "下联：白水泉边少女妙"

         );

         //在页面上弹出下联
        
         </script>
        
         </head>
        
         </html>

执行上面的小例子，在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，如下所示：

js中三种弹出框[通俗易懂]

接着，单击“确认”按钮后再显示第二个对话框并显示“白水泉边少女妙！”，效果如下；

js中三种弹出框[通俗易懂]

在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，单击“确认”按钮后再显示第2个对话框并显示“白水泉边少女妙！”我们来分析一下这个小例子：

a、在<script>脚本块中两次调用alert()方法；

b、在每个alert()括号内分别添加了一段文本信息，运行出现如下图所示的页面，当使用鼠标单击页面上的“确定”按钮后，出现第二个页面，再点击“确定”按钮后就关闭页面上的对话框。注意：两个对话框是分别显示的，而不是一个覆盖另一个，这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。

alert()是js的window对象的一个方法，调用时可以写成window.alert()，也可以写成alert()，功能都是产生一个带确认按钮的对话框，上面显示括号内的信息，

第二种：confirm()方法

confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confirm()方法以及后面介绍的prompt()方法时也可以不写window。下面来看一个关于confirm()的小例子,代码如下所示：

         <html>
        
         <head>
        
         <title>编写html页面</title>
        
         <script language=

         "javascript"

         > 

         //js脚本标注
        
         confirm(

         "上联：一但重泥拦子路；下联：两岸夫子笑颜回"

         ); 

         //在页面上弹出确认对话框
        
         </script>
        
         </head>
        
         </html>

显示效果如下：

js中三种弹出框[通俗易懂]

分析一下这个小例子：

a、在<script>脚本块中添加confirm()方法、

b、在confirm()括号内添加了一段文本信息，运行效果如上图所示，如果用户单击“确认”按钮，则confirm()方法会返回true，如果用户单击“取消”按钮，则confirm()方法会返回false，无论用户选择哪个按钮，都会关闭对话框，而继续执行javascript代码。单击“确认”或“取消”按钮都是关闭对话框，似乎没有什么区别，实际上，无论是单击“确认”或“取消”按钮都会返回一个布尔值，这样就可以再幕后有一些js代码来发挥按钮的作用，请大家看下面的例子，体会使用confirm()返回布尔值的妙处。代码如下：

         <html>
        
         <head>
        
         <title>编写html页面</title>
        
         <script language=

         "javascript"

         > 

         //js脚本标注
        
         var

         con;
        
         con=confirm(

         "你喜欢玫瑰花么?"

         ); 

         //在页面上弹出对话框
        
         if

         (con==

         true

         )alert(

         "非常喜欢!"

         );
        
         else

         alert(

         "不喜欢!"

         );
        
         </script>
        
         </head>
        
         </html>

我们来分析一下这个小例子：

a、在<script>脚本块中声明了一个变量con。

b、con=confirm()一句将confirm()方法返回的布尔值赋给con。

c、通过if语句来使用con的值，分别执行不同的语句；执行的效果如下：

js中三种弹出框[通俗易懂]

如果单击页面的确认框上的“确定”按钮后，出现如下图所示的页面：

js中三种弹出框[通俗易懂]

如果单击“取消”按钮，则出现如下图所示的页面：

js中三种弹出框[通俗易懂]

第三种： prompt()方法

alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。

看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下：

         <html>
        
         <head>
        
         <title>编写html页面</title>
        
         <script language=

         "javascript"

         > 

         //js脚本标注
        
         var

         name,age;
        
         name=prompt(

         "请问你叫什么名字?"

         ); 

         /*在页面上弹出提示对话框，
        
         将用户输入的结果赋给变量name*/
        
         alert(name); 

         //输出用户输入的信息
        
         age=prompt(

         "你今年多大了?"

         ,

         "请在这里输入年龄"

         ); 

         /*在页面上再一次弹出提示对话框，
        
         讲用户输入的信息赋给变量age*/
        
         alert(age)

         //输出用户输入的信息
        
         </script>
        
         </head>
        
         </html>