JavaScript实现消息对话框

 更新时间:2022年09月01日 11:13:28   作者:Katy_Pei  
这篇文章主要为大家详细介绍了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>

效果图:

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

相关文章

  • ECharts地图绘制和钻取简易接口详解

    ECharts地图绘制和钻取简易接口详解

    这篇文章主要给大家介绍了关于ECharts地图绘制和钻取简易接口的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ECharts具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • JS中的prototype与面向对象的实例讲解

    JS中的prototype与面向对象的实例讲解

    JS中的prototype与面向对象的实例讲解,需要的朋友可以参考一下
    2013-05-05
  • 浅析Js中的单引号与双引号问题

    浅析Js中的单引号与双引号问题

    本文是对Js中单引号与双引号的使用进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 微信小程序canvas绘制圆角base64图片的实现

    微信小程序canvas绘制圆角base64图片的实现

    这篇文章主要介绍了微信小程序canvas绘制圆角base64图片的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js+css实现计算器功能

    js+css实现计算器功能

    这篇文章主要为大家详细介绍了js+css实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 小程序如何构建骨架屏

    小程序如何构建骨架屏

    最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏",下面我们来简单了解一下吧
    2019-05-05
  • 一文读懂ES7中的javascript修饰器

    一文读懂ES7中的javascript修饰器

    这篇文章主要给大家介绍了关于ES7中javascript修饰器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES7具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • bootstrap datetimepicker日期插件使用方法

    bootstrap datetimepicker日期插件使用方法

    这篇文章主要为大家详细介绍了bootstrap datetimepicker的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解

    关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的

    这篇文章主要介绍了关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用,需要的朋友可以参考下
    2017-05-05
  • 简单实现Bootstrap标签页

    简单实现Bootstrap标签页

    这篇文章主要教大家简单实现Bootstrap标签页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论