系统对话框

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示地网页没有关系,也不包含HTML。它们的外观由操作系统及浏览器设置决定(本次用例都是显示谷歌浏览器下的对话框样式),而不是由css决定。此外,通过这几个方法打开的对话框都是同步和静态的,即显示这些对话框的时候,代码会停止执行,而关掉这些对话框后代码又会恢复执行。

alert()警示框

警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。这个方法接收一个字符串并将其显示给用户。通常使用这个方法生成的“警告”对话框项用户显示一些他们无法控制的消息,例如错误消息。而用户只能在看完消息后关闭对话框。

<input type="button" onclick="showalert()" vlaue="show-alert" />
<input type="button" onclick="showalert2()" vlaue="show-alert" />
<script type="text/javascript">
  function showalert(){
        alert("alert");
    }
    function showalert2(){
         alert("alert" + "\n" + "html");
    }
</script>

confirm()确认框

确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

<input type="button" onclick="show_confirm()" vlaue="show-confirm" />
<script type="text/javascript">
function show_confirm(){
       var r = confirm("press a button");
       if(r == true){
             alert("OK");
       }else{
             alert("NO");
       }
 }
</script>

执行上面的代码,会出现一个确认框,包含一段显示的信息、一个确认按钮和一个取消按钮,如果用户点击了确定按钮,就会通过警示框向用户显示消息“OK”,如果用户单击了取消按钮,就会通过警示框向用户显示消息“NO”。

prompt()提示框

提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操做。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。prompt()方法接受两个参数:要显示给用户的文本提示和文本输入域的默认值(可以时一个空的字符串)。

<input type="button" onclick="show_prompt()" vlaue="show-prompt" />
<script type="text/javascript">
function show_prompt(){
    var name = prompt("put your name","Lili");
    {
        if(name != null && name !=""){
              document.write("hello" + name);
       }else{
              document.write("what is your name");
         }
     }
}
</script>

print()和find()

除了上面的三个对话框外,还有两个可以通过JavaScript打开的对话框,即“查找”和“打印”,这两个对话框都是异步显示的,能够将控制权立即交还给脚步。这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令打开的对话框相同。

<input type="button" onclick="show_print()" vlaue="show-print"/>
<input type="button" onclick="show_find()" vlaue="show-find"/>
<script type="text/javascript">
function show_print(){
    window.print();
}
function show_find(){
    window.find();
}
</script>

猜你喜欢

转载自www.cnblogs.com/yuyujuan/p/9216703.html