JavaScript的三种弹出提示框(alert、confirm、prompt)

简介: JavaScript的三种弹出提示框(alert、confirm、prompt)

alert ()


alert()方法是显示一条弹出提示消息和确认按钮的警告框。

需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来。


使用方式:


alert("想要提示的文本内容")


样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      alert("这是弹出框提示文本")
    </script>
    <title></title>
  </head>
  <body>
    <p>alert是阻塞的函数</p>
    <p>这句话只有在确认弹出框的提示文本后才会显示</p>
  </body>
</html>

效果截图:

1.gif



confirm()


confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。

如果点击"确定"返回true,否则返回false。


使用方式:

不接收返回值:


confirm("这样写可以直接显示,不接收返回值。")


接收返回值:


var x; 
var r=confirm("请按下按钮!");
if (r==true){
  x="你按下的是\"确定\"按钮。";
}
else{
  x="你按下的是\"取消\"按钮。";
}
document.write(x)

样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      // 使用方式一
      confirm("这样写可以直接显示,不接收返回值。")
      // 使用方式二
      var x; 
      var r=confirm("请按下按钮!");
      if (r==true){
        x="你按下的是\"确定\"按钮。";
      }
      else{
        x="你按下的是\"取消\"按钮。";
      }
      document.write(x)
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

效果截图:

2.gif


prompt ()


prompt()方法是显示提示用户进行输入的对话框。

这个方法返回的是用户输入的字符串。


使用方式:


不显示默认文本:


prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。


显示默认文本:


var x; 
var name=prompt("请输入你的名字","Keafmd"); 
if (name!=null && person!=""){ 
 x="你好! " + name + "。";
 document.write(x)
} 

样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      //方式一
      prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。
      //方式二
      var x; 
      var name=prompt("请输入你的名字","Keafmd"); //显示默认文本 "Keafmd"
      if (name!=null && name!=""){ 
       x="你好! " + name + "。";
       document.write(x)
      } 
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

效果截图:

3.gif

相关文章
|
JavaScript
JS利用alert和prompt实现基本的输入输出用户名
JS利用alert和prompt实现基本的输入输出用户名
122 0
|
JavaScript 前端开发
JavaScript学习笔记(四),js中的location地址跳转,confirm确认验证、setInterval定时器的使用
JavaScript学习笔记(四),js中的location地址跳转,confirm确认验证、setInterval定时器的使用
211 0
JavaScript学习笔记(四),js中的location地址跳转,confirm确认验证、setInterval定时器的使用
|
JavaScript 前端开发
JavaScript 浏览器交互:alert、prompt 和 confirm
JavaScript 浏览器交互:alert、prompt 和 confirm
390 0
JavaScript 浏览器交互:alert、prompt 和 confirm
|
JavaScript 前端开发
js:获取鼠标点击位置,弹出提示框
js:获取鼠标点击位置,弹出提示框
332 0
js:获取鼠标点击位置,弹出提示框
|
JavaScript 前端开发 容器
如何用 CSS 和原生 JS 创作一组 tooltip 提示框
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/rqyoYY 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1664 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
73 4