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>

效果图：

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

赞 (0)

相关推荐

  • 利用javascript打开模态对话框(示例代码)

    利用javascript打开模态对话框(示例代码)

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript">   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig

  • JavaScript弹出对话框的三种方式

    JavaScript弹出对话框的三种方式

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行

  • javascript window.confirm确认 取消对话框实现代码小结

    confirm() 方法 confirm() 方法用于显示一个带有指定消息和确定及取消按钮的对话框. 说明:如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false 一种: 复制代码 代码如下: <a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.baidu.com'">弹出窗口</a> 二种: 复制代码 代码如下: &

  • JavaScript写的一个自定义弹出式对话框代码

    JavaScript写的一个自定义弹出式对话框代码

    下图是我的设计思路 下面是具体的js代码 1,首先定义几个自定义函数 代码 复制代码 代码如下: //判断是否为数组 function isArray(v) { return v && typeof v.length == 'number' && typeof v.splice == 'function'; } //创建元素 function createEle(tagName) { return document.createElement(tagName); } //在

  • js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { aler

  • ExtJS Ext.MessageBox.alert()弹出对话框详解

    ExtJS Ext.MessageBox.alert()弹出对话框详解

    复制代码 代码如下: Ext.onReady(function() { Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的 }); 效果图: 复制代码 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { title:'提示', msg: 'JSON配置方式,简单吧' } Ext.Msg.show(config); }); 效果图: 上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识

  • 九种js弹出对话框的方法总结

    [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: 复制代码 代码如下: <script LANGUAGE="javascript"> <!-- window.open ("page.html") --> </script> 因为这是一段javascripts代码,所以它们应该放在<script LANGUAGE="javascript">标签和</s

  • Extjs Ext.MessageBox.confirm 确认对话框详解

    Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮"是"和"否"如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中. 调用格式: confirm(String title,String msg,[function fn],[Object scope]) 参数说明: Ext.MessageBox.

  • JS实现弹出下载对话框及常见文件类型的下载

    JS实现弹出下载对话框及常见文件类型的下载

    1.写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. 这里所说的下载,有时候也可以理解为保存.出于安全考虑,JS肯定无法直接调用FileAPI写文件到磁盘,但是却可以通过下载来变相实现保存功能. 2.几个备用知识点 2.1. JS触发单击事件 既然是用A标签模拟,那么肯定要知道JS如何主动触发单击事件. 最简单的触发单击事件肯定是elem.clic

  • js弹出确认是否删除对话框

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐