zoukankan      html  css  js  c++  java
  • JavaScript 弹出框

    JavaScript 有三种类型的弹出框:警告框、确认框和提示框。

    警告框

    如果要确保信息传递给用户,通常会使用警告框。

    当警告框弹出时,用户将需要单击“确定”来继续。

    语法

    window.alert("sometext");

    window.alert() 方法可以不带 window 前缀来写。

    实例

    alert("我是一个警告框!");

    完整实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>JavaScript 警告框</h1>
    
    <button onclick="myFunction()">试一试</button>
    
    <script>
    function myFunction() {
      alert("我是一个警告框!");
    }
    </script>
    
    </body>
    </html>

    确认框

    如果您希望用户验证或接受某个东西,则通常使用“确认”框。

    当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。

    如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。

    语法

    window.confirm("sometext");

    window.confirm() 方法可以不带 window 前缀来编写。

    实例

    var r = confirm("请按按钮");
    if (r == true) {
        x = "您按了确认!";
    } else {
        x = "您按了取消!";
    }

    完整实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>JavaScript 确认框</h1>
    
    
    <button onclick="myFunction()">试一试</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
      var txt;
      if (confirm("Press a button!")) {
        txt = "您按了确定";
      } else {
        txt = "您按了取消";
      }
      document.getElementById("demo").innerHTML = txt;
    }
    </script>
    
    </body>
    </html>

    提示框

    如果您希望用户在进入页面前输入值,通常会使用提示框。

    当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

    如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。

    语法

    window.prompt("sometext","defaultText");

    window.prompt() 方法可以不带 window 前缀来编写。

    实例

    var person = prompt("请输入您的姓名", "比尔盖茨");
    if (person != null) {
        document.getElementById("demo").innerHTML = "你好 " + person + "!今天过的怎么样?";
    }

    完整实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>JavaScript Prompt</h1>
    
    <button onclick="myFunction()">试一试</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
      var txt;
      var person = prompt("请输入您的名字:", "哈利波特");
      if (person == null || person == "") {
        txt = "用户取消输入";
      } else {
        txt = "你好," + person + "!今天过得好吗?";
      }
      document.getElementById("demo").innerHTML = txt;
    }
    </script>
    
    </body>
    </html>

    折行

    如需在弹出框中显示折行,请在反斜杠后面加一个字符 n。

    实例

    alert("Hello
    How are you?");

    完整实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>JavaScript</h1>
    
    <p>在警告框中换行。</p>
    
    <button onclick="alert('Hello
    How are you?')">试一试</button>
    
    </body>
    </html>
    

      

  • 相关阅读:
    java版二维码实例(非安卓版)
    Java—SSH(MVC)
    关于flex里面mousedown 和click事件冲突问题的解决办法
    navicat ssh通道受限问题处理
    如何更改linux文件目录拥有者及用户组
    如何查看linux中的ssh端口开启状态
    centos linux mysql 10060远程错误代码
    Navicat for MySQL 使用SSH方式链接远程数据库(二)
    Petri Net 的形式化定义
    如何做鲫鱼豆腐汤
  • 原文地址:https://www.cnblogs.com/zmdComeOn/p/10979257.html
Copyright © 2011-2022 走看看