JavaScript 确认:选择是或否

wufei123 2024-06-02 阅读:11 评论:0
在这篇简短的文章中,我们将讨论如何使用 JavaScript 显示确认对话框。确认对话框允许您根据用户输入执行操作。 JavaScript 是网络的核心技术之一。大多数网站都使用它,并且所有现代网络浏览器都支持它,而不需要插件。在 Env...

javascript 确认:选择是或否

在这篇简短的文章中,我们将讨论如何使用 JavaScript 显示确认对话框。确认对话框允许您根据用户输入执行操作。

JavaScript 是网络的核心技术之一。大多数网站都使用它,并且所有现代网络浏览器都支持它,而不需要插件。在 Envato Tuts+,我们正在讨论可以帮助您进行日常 JavaScript 开发的提示和技巧。

作为一名 JavaScript 开发人员,您经常需要以是或否问题的形式获取用户输入,并基于此执行某些操作。具体来说,有些操作是敏感且无法撤消的,您希望向用户发出警告或确认他们是否确实打算执行该操作,以免他们误操作。例如,如果有一个删除链接允许您从数据库中删除一个实体,您需要与用户确认他们是否确实要删除它。因此,即使用户错误地点击了删除链接,他们至少还有机会取消它。

在这篇文章中,我将向您展示两种在 JavaScript 中确认用户操作的方法:使用 confirm 方法和使用隐藏确认 div。

confirm 方法的语法

在 JavaScript 中,您可以使用 window 对象的 confirm 方法来显示对话框,并等待用户确认或取消。今天,我们将结合实际示例讨论它的工作原理。

在本节中,我们将介绍 window.confirm 方法的语法。

confirm 方法的语法如下所示:

var result = window.confirm(message);

confirm 方法采用单个字符串参数,您可以传递要在对话框中显示的消息。这是一个可选参数,但您需要传递一条明智的消息,否则将显示一个带有是和否选项的空白对话框,并且可能对您的访问者没有任何意义。通常,消息采用问题的形式,并向用户提供两个选项供选择。

在对话框中,有两个按钮:确定和取消。如果用户点击确定按钮,confirm方法返回true,如果用户点击取消按钮,confirm方法返回false。所以可以通过confirm方法的返回值来了解用户的选择。 (如果您希望按钮显示不同的内容,例如是和否,我将在本文底部向您展示如何操作。)

由于 window 对象始终是隐式的,也就是说它的属性和方法始终在作用域内,因此您还可以调用 confirm 方法,如以下代码片段所示。

var result = confirm(message);

需要注意的是,确认对话框是模态且同步的。因此,当显示对话框时,JavaScript 代码执行就会停止,而在用户通过单击“确定”或“取消”按钮关闭对话框后,JavaScript 代码会继续执行。

这就是 confirm 方法的语法概述。在下一节中,我们将介绍一个现实世界的示例。

confirm 方法的真实示例

在本节中,我们将通过一个实际示例来演示如何在 JavaScript 中使用 confirm 方法。

看一下下面的示例。

当用户单击删除我的个人资料!按钮时,它会调用 deleteProfile 函数。在deleteProfile函数中,我们调用了confirm方法,该方法向用户显示确认对话框。

最后,如果用户单击确认对话框中的确定按钮,我们将继续将用户重定向到 /deleteProfile.php 页面,该页面将执行删除操作。另一方面,如果用户单击取消按钮,我们将不会执行任何操作。 JavaScript 执行将停止,直到用户做出选择并关闭确认对话框。

这就是如何使用JavaScript中的confirm方法来呈现是或否选择对话框。

使用隐藏 Div 确认“是”或“否”

使用 confirm 方法来获取用户确认有一些缺点。一是确认对话框不会成为您的应用或网站 UI 的一部分。它不会使用您的品牌或配色方案。它也无法自定义,例如,如果您想说是或否而不是确定和取消。最后,确认对话框是模态的,因此只要显示它,用户就无法与应用界面的任何其他部分进行交互。

确认是或否的另一种方法是在页面上使用隐藏的 div。看一下下面的例子:

在此示例中,我们有一个隐藏的确认 div,其 ID 为 confirm。要显示 div,我们只需将其 hidden 属性设置为 true。当我们想要显示确认信息时,我们将 hidden 设置为 true,并再次将其设置为 false 以隐藏它。

正如您所看到的,这种确认是或否的方法比 window.confirm 方法使我们具有更大的灵活性和定制性。

结论

今天,我们讨论了两种在 JavaScript 中获取用户确认的方法。首先我们看最简单的方法:window.confirm方法。然而,这并不能创造良好的用户体验。然后我向您展示了如何使用隐藏的 div 来获得用户确认,并更好地控制确认的外观和行为。

以上就是JavaScript 确认:选择是或否的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • 华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀

    华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀
    华为 mate 70 或将首发麒麟新款处理器,并将此前有博主爆料其性能跑分将突破110万,这意味着 mate 70 性能将重新夺回第一梯队。也因此,苹果 iphone 16 唯一能有一战之力的性能,也要被 mate 70 拉近不少了。 据悉,华为 Mate 70 性能会大幅提升,并且销量相比 Mate 60 预计增长40% - 50%,且备货充足。如果 iPhone 16 发售日期与 Mate 70 重合,销量很可能被瞬间抢购。 不过,iPhone 16 还有一个阵地暂时难...
  • 酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元

    酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元
    本站 5 月 16 日消息,酷凛 id-cooling 近日推出霜界 240/360 一体式水冷散热器,采用黑色无光低调设计,分别定价 239/279 元。 本站整理霜界 240/360 散热器规格如下: 酷凛宣称这两款水冷散热器搭载“自研新 V7 水泵”,采用三相六极马达和改进的铜底方案,缩短了水流路径,相较上代水泵进一步提升解热能力。 霜界 240/360 散热器的水泵为定速 2800 RPM 设计,噪声 28db (A)。 两款一体式水冷散热器采用 27mm 厚冷排,...
  • 惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起

    惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起
    本站 5 月 14 日消息,继上线官网后,新款惠普战 99 商用笔记本现已上架,搭载酷睿 ultra / 锐龙 8040处理器,最高可选英伟达rtx 3000 ada 独立显卡,售价 4999 元起。 战 99 锐龙版 R7-8845HS / 16GB / 1TB:4999 元 R7-8845HS / 32GB / 1TB:5299 元 R7-8845HS / RTX 4050 / 32GB / 1TB:7299 元 R7 Pro-8845HS / RTX 2000 Ada...
  • python中def什么意思

    python中def什么意思
    python 中,def 关键字用于定义函数,这些函数是代码块,执行特定任务。函数语法为 def (参数列表)。函数可以通过其名字和圆括号调用。函数可以接受参数作为输入,并在函数体中使用参数名访问。函数可以使用 return 语句返回一个值,它将成为函数调用的结果。 Python 中 def 关键字 在 Python 中,def 关键字用于定义函数。函数是代码块,旨在执行特定任务。 语法 def 函数定义的语法如下: def (参数列表): # 函数体 示例 定义...
  • python中int函数的用法

    python中int函数的用法
    int() 函数将值转换为整数,支持多种类型(字符串、字节、浮点数),默认进制为 10。可以指定进制数范围在 2-36。int() 返回 int 类型的转换结果,丢弃小数点。例如,将字符串 "42" 转换为整数为 42,将浮点数 3.14 转换为整数为 3。 Python 中的 int() 函数 int() 函数用于将各种类型的值转换为整数。它接受任何可以解释为整数的值作为输入,包括字符串、字节、浮点数和十六进制表示。 用法 int(object, base=10) 其中...