JavaScript中的交互的方式alert,prompt,confirm的用法

news2024/10/6 10:31:19

一.alert的用法

1.alert 它会显示一条信息,弹出的这个带有信息的小窗口被称为模态窗。“modal” 意味着用户不能与页面的其他部分(例如点击其他按钮等)进行交互,直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮。

例子:

<script>
  let message = '你有一个报错!';
  alert(message);  		//返回一个确定,弹出的窗叫做 模态窗
</script>

2 如图

在这里插入图片描述

二.prompt的用法

1.prompt 函数接收两个参数:

在这里插入代码片
result = prompt(title, [
default])
;

2.解释

浏览器会显示一个带有文本消息的模态窗口,还有 input 框和确定/取消按钮。

  • title 显示给用户的文本
  • default 可选的第二个参数,指定 input 框的初始值

3.访问者可以在提示输入栏中输入一些内容,然后按“确定”键。然后我们在 result 中获取该文本。或者他们可以按取消键或按 Esc 键取消输入,然后我们得到 null 作为 result。

4 例子:

<script>
   let age = prompt('请输入你的年龄?',18);
   console.log('你的年龄为', age);   //返回的含有确定和取消 ,后面的为可选择的项目
</script>


在这里插入图片描述
第二个参数为空的时候
在这里插入图片描述

三.confirm的用法

1.语法:

result = confirm(question);

confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。

点击确定返回 true,点击取消返回 false

2.例子:

<script>
  let is_del = confirm('请确认是否删除数据?');
  console.log(is_del);      //返回的含有确定和取消,确定就是true,取消就是false
</script>

3.如图:在这里插入图片描述

四.总结:

1.我们学习了与用户交互的 3 个浏览器的特定函数:

  • alert
    显示信息

  • prompt
    显示信息要求用户输入文本。点击确定返回文本,点击取消或按下 Esc 键返回 null。

  • confirm
    显示信息等待用户点击确定或取消。点击确定返回 true,点击取消或按下 Esc 键返回 false。

2.这些方法都是模态的:它们暂停脚本的执行,并且不允许用户与该页面的其余部分进行交互,直到窗口被解除。

3.上述所有方法共有两个限制:

  1. 模态窗口的确切位置由浏览器决定。通常在页面中心。
  2. 窗口的确切外观也取决于浏览器。我们不能修改它。

这就是简单的代价。还有其他一些方法可以显示更漂亮的窗口,并与用户进行更丰富的交互,但如果“花里胡哨”不是非常重要,那使用本节讲的这些方法也挺好。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/850748.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【二叉树】105. 从前序与中序遍历序列构造二叉树

链接: 105. 从前序与中序遍历序列构造二叉树 先序 能够确定谁是根 中序 知道根之后&#xff0c;能够确定左子树和右子树的范围 例子 根据先序的性质&#xff08;根左右&#xff09;&#xff0c;能够确定根&#xff0c;我们就能够从总序中找出根节点&#xff08;rooti所在…

OpenLayers实战,OpenLayers画线测量距离和画多边形测量区域面积

专栏目录: OpenLayers实战进阶专栏目录 前言 本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。 本章代码就是通过OpenLayers的图形绘制功能,通过监听绘制事件获取绘制的图形,并进行计算,就可以得到长度和面积。日常开发中比较常用,所以不废话,立…

Maven构建项目失败 Non-resolvable import POM

Maven构建项目失败 Non-resolvable import POM Non-resolvable import POM: XXX:pom:4.2.0 was not found in https://repo.maven.apache.org/maven2 during a previous attempt.项目结构定位错误解决问题打包碰到另外的问题Failed to execute goal org.springframework.boot:s…

GCC编译过程:预处理->编译->汇编->链接

目录 引言 概括介绍 一、预处理 二、编译 三、汇编 四、链接 总结 引言 当使用集成开发环境&#xff08;IDE&#xff09;进行C语言编程时&#xff0c;点击"编译"按钮后&#xff0c;整个C程序从源代码到可执行文件的生成过程会自动完成。IDE会在后台为我们执行C…

CAD练习——绘制冲压件三视图

首先还是先设置咱们的绘图模板&#xff1a; 这是图层划分&#xff1a; 文字样式设置&#xff1a; 标注样式&#xff1a; 从主视图开始&#xff0c;首先绘制如下图形 用到的快捷指令&#xff1a; L&#xff1a;直线 O&#xff1a;偏移 TR&#xff1a;修剪 效果&#xff1a;…

实现跨域的几种方式

原理 前后端的分离导致了跨域的产生 跨域的三要素&#xff1a;协议 域名 端口 三者有一个不同即产生跨域 例如&#xff1a; http://www.csdn.com https://www.csdn.com 由于协议不同&#xff0c;端口不同而产生跨域 注&#xff1a;http的默认端口80&#xff0c;https的默…

【C++】多态的底层原理(虚函数表)

文章目录 前言一、虚函数表二、派生类中虚函数表1.原理2.例子&#xff1a; 三、虚函数的存放位置四 、单继承中的虚函数表五、多继承中的虚函数表六、问答题 前言 一、虚函数表 通过观察测试我们发现b对象是8bytes&#xff0c;除了_b成员&#xff0c;还多一个__vfptr放在对象的…

湖南科技学院图书馆藏八一新书《乡村振兴战略下传统村落文化旅游设计》

湖南科技学院图书馆藏八一新书《乡村振兴战略下传统村落文化旅游设计》

JDBC(常用类与接口、实现数据库的增删查改)

目录 1.Connection接口常用方法 2.DriverMange类 3.Statement接口 4.实现表的数据更新&#xff08;增、改、删&#xff09; 5.实现数据查找&#xff08;ResultSet接口&#xff09; 6.PreparedStatement 数据更新 1.Connection接口常用方法 用来与数据库连接的对象&#xff…

66 # form 数据格式化

实现一个 http 服务器 客户端会发送请求 GET POST 要处理不同的请求体的类型 表单格式&#xff08;formData a1&b2&#xff09;&#xff0c;可以直接通信不会出现跨域问题JSON &#xff08;"{"kaimo":"313"}"&#xff09;文件格式 &#x…

刚刚更新win11,记事本消失怎么处理?你需要注意些什么?

记录window11的bug hello&#xff0c;我是小索奇 昨天索奇从window10更新到了window11&#xff0c;由于版本不兼容卸载了虚拟机&#xff0c;这是第一个令脑壳大的&#xff0c;算了&#xff0c;还是更新吧&#xff0c;了解了解win11的生态&#xff0c;后期重新装虚拟机 第一个可…

uniapp scroll-view 隐藏滚动条

/*清除滚动条 - 适配安卓*/::-webkit-scrollbar {width: 0;height: 0;color: transparent;}/*清除滚动条 - 适配IOS*/::-webkit-scrollbar {display: none;}

前端项目时因chunk-vendors过大导致首屏加载太慢,Vue Build时chunk-vendors的优化方案...

1、compression-webpack-plugin插件打包.gz文件 安装插件 也可以指定版本 我这里下载的是1.1.2版本的&#xff0c;试过更高的版本会有ES6语法的报错&#xff0c;因为我node使用的是v12&#xff0c;如果node版本更高可以尝试更高版本 npm install --save-dev compression-webpa…

day14 引用数组类型

向上造型 计算机 编译过程 和运行过程 Pet pet new Cat(); 图中 pet.eat()为父类构造方法 、 pet.catchMouse&#xff08;&#xff09;为子类方法 向上造型构成对象不能调用子类独有方法 出现方法重写会调用子类方法 向下造型 Cat cat1 (Cat)new Pet 这种形式错误…

FortiGate防火墙日志审计运维

环境介绍 CPU&#xff1a;8核&#xff0c;内存&#xff1a;16GB&#xff0c;硬盘&#xff1a;100GB 操作系统版本&#xff1a;CentOS-7-x86_64-DVD-2003 平台版本&#xff1a;鸿鹄2.7.0 安装组件 安装环境支持确认 鸿鹄计算引擎使用了 AVX2 高级指令集做向量计算加速&#xf…

Python SQLAlchemy ( ORM )

From Python中强大的通用ORM框架&#xff1a;SQLAlchemy&#xff1a;https://zhuanlan.zhihu.com/p/444930067Python ORM之SQLAlchemy全面指南&#xff1a;https://zhuanlan.zhihu.com/p/387078089 SQLAlchemy 文档&#xff1a;https://www.sqlalchemy.org/ SQLAlchemy入门和…

STM32F103——GPIO八种工作模式

目录 1、GPIO 基本结构分析 2、GPIO 八种工作模式 2.1 输入浮空 2.2 输入上拉 2.3 输入下拉 2.4 模拟功能 2.5 开漏输出 2.6 开漏式复用功能 2.7 推挽输出 2.8 推挽式复用功能 3、GPIO 八种工作模式特点及应用 1、GPIO 基本结构分析 STM32F103的 GPIO 工作有八种…

Vue.js2+Cesium1.103.0 七、Primitive 绘制航线元素

Vue.js2Cesium1.103.0 七、Primitive 绘制航线元素 用 Primitive 绘制航线元素&#xff0c;包括航点图标&#xff0c;航线线段&#xff0c;线段距离标注&#xff0c;航点序号&#xff0c;海拔标注&#xff0c;总航程等信息。 可同时绘制多条航线&#xff1b;可根据 id 清除指…

【LeetCode】数据结构题解(11)[用队列实现栈]

用队列实现栈 &#x1f609; 1.题目来源&#x1f440;2.题目描述&#x1f914;3.解题思路&#x1f973;4.代码展示 所属专栏&#xff1a;玩转数据结构题型❤️ &#x1f680; >博主首页&#xff1a;初阳785❤️ &#x1f680; >代码托管&#xff1a;chuyang785❤️ &…

PHP最简单自定义自己的框架定义常量自动生成目录(三)

1、框架入口增加模块定义&#xff0c;实现多模块功能 index.php 定义模块 <?php //定义当前请求模块 define("MODULE",index); require "./core/KJ.php"; 创建后台模块admin.php <?php define("MODULE",admin); require "./cor…