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>

posted on 2016-05-10 07:45 Newbie_小白阅读(1095) 评论(0) 编辑收藏举报