zoukankan      html  css  js  c++  java
  • JS alert()、confirm()、prompt()的区别

    这三个都是属于弹框类型的


    使用警告、提示和确认消息框来获得用户的输入。这些消息框是 window 对象的接口方法。由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息框的全名(例如 "window.alert()")。

    警告消息框
    alert 方法有一个参数,即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说,用户必须先关闭该消息框然后才能继续进行操作。

    window.alert("欢迎!请按“确定”继续。");


    确认消息框
    使用确认消息框可向用户问一个“是-或-否”问题,并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框:用户必须在响应该对话框(单击一个按钮)将其关闭后,才能进行下一步操作。

    <script type="text/javascript">
    var truthBeTold = confirm("单击“确定”继续。单击“取消”停止。");
    if (truthBeTold = true) {
    alert("欢迎访问我们的 Web 页!");
    } else {
    alert("再见啦!");
    }

    </script>


    提示消息框
    提示消息框提供了一个文本字段,用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数,则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则,默认文本为 ""。

    与alert( ) 和 confirm( ) 方法类似,prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框

    <script type="text/javascript">
    var iNumber = Number(prompt("输入一个5到100之间的数字", ""));
    if (isNaN(iNumber)) //判断输入的是否是数字
    document.write("请确认你的输入正确");
    else if (iNumber > 100 || iNumber < 5) //判断输入的数字范围
    document.write("你输入的数字范围不在5和100之间");
    else
    document.write("你输入的数字是:" + iNumber);

    </script>

    示例2:
    <!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>

    综合应用
    <!DOCTYPE html>
    <html>
    <head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript">
    function openWindow() {
    var open = confirm("确认新建窗口打开网站吗?");
    if (open == true)
    // 新窗口打开时弹出确认框,是否打开
    {
    var url = prompt("通过输入对话框,确定打开的网址", "http://www.imooc.com");
    if (url != null)
    // 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/
    {
    window.open(url, "_blank", 'width=400px,height=500px,menubar=no,toolbar=no');
    }
    //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
    else {
    alert("再见!");
    }
    }
    else {
    alert("再见!");
    }
    }
    </script>
    </head>
    <body>
    <input type="button" value="新窗口打开网站" onclick="openWindow()"/>
    </body>
    </html>


     
  • 相关阅读:
    day24<多线程>
    day23<File类递归练习>
    day22<IO流+>
    day21<IO流+&FIle递归>
    day20<IO流>
    day19<异常&File类>
    day18<集合框架+>
    day17<集合框架+>
    R语言中的标准输入,输出, 错误流
    Perl Spreadsheet::WriteExcel 模块自动生成excel 文件
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5476443.html
Copyright © 2011-2022 走看看