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

一.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.hqwc.cn/news/58723.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【TiDB理论知识08】HATP概述

1 HTAP技术 OLTP 在线事务 支付 转账 高并发 每次操作的数据量少 &#xff0c;行存 OLAP 报表分析 每次操作大量数据 列存储 2 传统解决方案 数据抽取到数仓或者数据湖 ETL有延迟 &#xff0c;一般会有T1 T2 数据多副本 3 HTAP的要求 4 TIDB的HTAP架构 TiFlash特点&…

RocketMQ 事务消息

事务消息是 RocketMQ 的高级特性之一 。这篇文章&#xff0c;笔者会从应用场景、功能原理、实战例子三个模块慢慢为你揭开事务消息的神秘面纱。 1 应用场景 举一个电商场景的例子&#xff1a;用户购物车结算时&#xff0c;系统会创建支付订单。 用户支付成功后支付订单的状态…

【刷题笔记8.9】LeetCode题目:两数相加

LeetCode题目2&#xff1a;两数相加 题目及描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设…

商城-学习整理-基础-商品服务API-属性分组(七)

目录 一、创建系统菜单二、开发属性分组1、将三级分类功能抽取出来2、编写后端代码3、属性分组新增功能4、属性分组修改回显功能 三、品牌管理1、分页显示有点问题&#xff0c;使用MyBatis-Plus有点问题&#xff0c;需要使用分页插件&#xff0c;给容器中放一个2、修改模糊查询…

支付整体架构

5.4 支付的技术架构 架构即未来&#xff0c;只有建立在技术架构设计良好的体系上&#xff0c;支付机构才能有美好的未来。如果支付的技术体系在架构上存在问题&#xff0c;那么就没有办法实现高可用性、高安全性、高效率和水平可扩展性。 总结多年来在海内外支付机构主持和参与…

Fortinet安全专家问答实录|如何防护暴力破解、撞库攻击

黑客攻防&#xff0c;一个看似神秘&#xff0c;但却必不可缺的领域。近期&#xff0c;全球网络与安全融合领域领导者Fortinet&#xff08;Nasdaq&#xff1a;FTNT&#xff09;&#xff0c;开启了Fortinet DEMO DAY系列实战攻防演练线上直播&#xff0c;让人人都能零距离观摩黑客…

回顾 OWASP 机器学习十大风险

日复一日&#xff0c;越来越多的机器学习 (ML) 模型正在开发中。机器学习模型用于查找训练数据中的模式&#xff0c;可以产生令人印象深刻的检测和分类能力。机器学习已经为人工智能的许多领域提供了动力&#xff0c;包括情感分析、图像分类、面部检测、威胁情报等。 数十亿美…

【C++】开源:ceres和g2o非线性优化库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍ceres和g2o非线性优化库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…

文件传输软件的市场现状和未来趋势

文件传输软件是一种能够在不同计算机之间高效、便捷、安全地传送各种类型的文件的应用软件。它是计算机领域中的一项重要技术&#xff0c;涉及到网络通信、数据加密、文件管理等多个方面。随着互联网和移动互联网的发展&#xff0c;文件传输软件的市场需求也日益增大&#xff0…

2.5D游戏是如何做出来的呢,2.5D游戏快速制作教程

前言 【Unity实战篇 】 | 如何制作一款2.5D游戏&#xff0c;2.5D游戏制作案例一、2.5D 游戏概念二、绘制地图三、添加玩家动画和移动等操作四、视角配置4.1 调整摄像机与场景对象的角度4.2 增加镜头旋转功能 五、游戏效果展示 总结 前言 玩过游戏的朋友都知道&#xff0c;市面…

uni-app 封装api请求

前端封装api请求 前端封装 API 请求可以提高代码的可维护性和重用性&#xff0c;同时使得 API 调用更加简洁和易用。 下面是一种常见的前端封装 API 请求的方式&#xff1a; 创建一个 API 封装模块或类&#xff1a;可以使用 JavaScript 或 TypeScript 创建一个独立的模块或类来…

Freemarker:生成HTML文本文件

前置工作参考&#xff1a; Freemarker&#xff1a;基本使用_moreCalm的博客-CSDN博客 1、修改application.yml配置文件 server:port: 8881 #服务端口 spring:application:name: freemarker-demo #指定服务名freemarker:cache: false #关闭模板缓存&#xff0c;方便测试settin…