首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何创建自定义"确认"并暂停执行js直到用户单击按钮?

要创建自定义"确认"并暂停执行js直到用户单击按钮,您可以使用JavaScript的async/await功能和Promise对象。以下是一个示例:

代码语言:javascript
复制
// 创建一个自定义确认对话框
function customConfirm(message) {
  return new Promise(resolve => {
    const confirmBox = document.createElement("div");
    confirmBox.innerHTML = `
      <p>${message}</p>
     <button id="confirmYes">是</button>
     <button id="confirmNo">否</button>
    `;
    document.body.appendChild(confirmBox);

    document.getElementById("confirmYes").onclick = () => {
      resolve(true);
      confirmBox.remove();
    };

    document.getElementById("confirmNo").onclick = () => {
      resolve(false);
      confirmBox.remove();
    };
  });
}

// 使用自定义确认对话框
async function main() {
  const result = await customConfirm("您确定要继续吗?");
  if (result) {
    console.log("用户点击了是");
  } else {
    console.log("用户点击了否");
  }
}

main();

在这个示例中,我们创建了一个名为customConfirm的函数,它接受一个消息参数,并返回一个Promise对象。该函数会创建一个包含两个按钮("是"和"否")的自定义确认对话框。当用户单击其中一个按钮时,Promise对象将解析为true(用户单击"是")或false(用户单击"否")。

然后,我们创建了一个名为main的异步函数,该函数使用await关键字来暂停执行,直到用户单击自定义确认对话框中的按钮。根据用户的选择,我们可以执行不同的操作。

这个示例可以根据您的需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Native调试心得

如何通过 Chrome调试React Native程序 你可以通过以下步骤来调试你的React Native程序: 第一步:启动远程调试 在Developer Menu下单击”Debug JS Remotely...Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...执行控工具 从上图可以看到“执行控工具”按钮在侧板顶部,让你可以按步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。...跳出(Step out): 当你进入一个函数后,你可以点击 Step out 执行函数余下的代码跳出该函数。...编辑断点(Edit Breakpoint): 通过该功能你可以创建一个条件断点,你也可以在边栏(gutter line) 右键选择添加条件断点(Add Conditional Breakpoint)

5K70

JavaScript 开发者需要了解的15个 DevTools 技巧

过滤网络请求 DevTools 的 Network 面板提供了几个过滤器,其中包括一个仅显示 JavaScript 请求的 JS 按钮。...选中 Add content scripts to ignore list ,使用正则表达式输入任意数量的文件名模式,例如 jquery.*\.js : ? 9....使用条件断点 单击 Sources 面板中打开的文件的行号会添加一个断点。它会在执行到这一行的时候暂停脚本,这样你可以单步执行代码来检查变量,调用堆栈等。...要在 Chrome DevTools 中停止无限循环,可以打开 Sources 面板,然后单击调试暂停图标以停止脚本。按住相同的图标,然后选择方形停止图标就可以停止脚本执行。 ? 12....设置空闲状态以检查你的应用如何响应锁定屏幕。

4.7K20

Sweet Alert弹窗插件的安装及使用详解笔记

如果用户单击 confirm(确认按钮,promises 将解析为 true 。如果警告被解除(通过单击警告外部),promises 将解析为 null 。...如果要显示自定义取消按钮,可以设置 buttons 为一个字符串数组,其中第一个值是“取消”按钮的文本,第二个值是“确认按钮的文本: swal("你确定要这么做吗?"...通过为其指定对象 buttons ,可以根据需求设置完全相同的按钮指定它们在单击时解析的值!...在下面的示例中,我们设置了3个按钮: cancel ,默认情况下解析为 null 具有自定义 "逃跑!" 文本。...注意,我们使用 content: "input" ,以便在用户单击确认按钮时显示输入字段检索它的值: swal({   text: '搜索一个电影,例如:"La La Land"。'

9K10

怎么用 JavaScript 构建自定义的 HTML5 视频播放器

在这个教程中,我将会带你使用 JavaScript 构建一个自定义的视频播放器。目标是如何利用浏览器 HTML5 Media API 来提升默认设置的体验。...默认控件已经被替换成自定义控件 切换播放状态 让我们从基础开始。我们需要通过点击播放按钮来播放或者暂停视频,并且更改应该匹配视频状态的图标。...{ video.play(); } else { video.pause(); } } 最后,我们创建一个时间监听器,当 playButton 按钮被点击后执行 togglePlay...,updatePlayButton 函数都会被执行,切换每个按钮中的 hidden 类。...你也可以通过点击(画中画模式)右上角的关闭按钮关闭 PiP 窗口。 切换视频控件 视频控件会占用一些空间阻挡用户查看一些内容。

10.8K20

React Native调试技巧与心得

如何通过 Chrome调试React Native程序 你可以通过以下步骤来调试你的React Native程序: 第一步:启动远程调试 在Developer Menu下单击”Debug JS Remotely...Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...执行控工具 从上图可以看到“执行控工具”按钮在侧板顶部,让你可以按步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。...跳出(Step out): 当你进入一个函数后,你可以点击 Step out 执行函数余下的代码跳出该函数。...编辑断点(Edit Breakpoint): 通过该功能你可以创建一个条件断点,你也可以在边栏(gutter line) 右键选择添加条件断点(Add Conditional Breakpoint)

6.7K50

Windows 10内部的23个隐藏技巧

然后双击新图标以提示一个下拉阴影,使用鼠标将其向下拖动到屏幕底部。请记住,这不是睡眠,这是关机。 启用“上帝模式” ? 您是想要访问PC细节的高级用户吗?“上帝模式”适合您。...您可以使用Windows键以及任何方向箭头按钮来提示类似的行为。 在虚拟桌面之间快速跳转 ? 您想在PC上执行多任务吗?...Windows剪贴板直到 Windows 10 October 2018 Update 才发生很大变化 ,您可以一次保存多个项目跨设备粘贴。...打开 设置>系统>剪贴板 ,然后打开剪贴板历史记录以开始执行更多操作。查看 我们的完整指南以了解如何使用它 。 改进的屏幕捕获工具 ?...您还可以在“开始”菜单中搜索“游戏栏”,以配置自定义键盘快捷键,以便在游戏过程中打开和关闭麦克风,屏幕捕获,录制计时器等功能。并且一定要查看我们的 最佳PC游戏 综述 。 按暂停更新 ?

4.1K30

(转载非原创)React 并发功能体验-前端的并发模式已经到来。

因此,当一个代码块运行时,其余的块必须等待执行。无法并发执行多线程工作。界面渲染也是一样的。 一旦 React 开始渲染某些东西,无法中断直到运行完成。...无中断渲染 通过可中断渲染,React.js 在处理和重新渲染列表时不会阻塞 UI。它通过暂停琐碎的工作、更新 DOM 确保 UI 不会卡顿,使 React.js 更加细化。...只需点击一个按钮,网页就会在屏幕上显示用户的详细信息。 假设用户首先单击一个按钮,然后单击下一个。屏幕要么变成空白,要么我们在屏幕上看到一个微调器。...": null} 使用 useTransition 钩子,React.js 继续显示没有用户详细信息的用户界面,直到用户详细信息准备好,但 UI 是响应式的。...在传统渲染中,整个 UI 会在每次击键时暂停直到它可以重新渲染屏幕。在此期间,即使我们继续打字,用户输入不会更新。 下图显示可中断渲染。在可中断渲染中,用户可以继续输入。

5.8K00

React 并发功能体验-前端的并发模式已经到来。

因此,当一个代码块运行时,其余的块必须等待执行。无法并发执行多线程工作。界面渲染也是一样的。 一旦 React 开始渲染某些东西,无法中断直到运行完成。...无中断渲染 通过可中断渲染,React.js 在处理和重新渲染列表时不会阻塞 UI。它通过暂停琐碎的工作、更新 DOM 确保 UI 不会卡顿,使 React.js 更加细化。...只需点击一个按钮,网页就会在屏幕上显示用户的详细信息。 假设用户首先单击一个按钮,然后单击下一个。屏幕要么变成空白,要么我们在屏幕上看到一个微调器。...": null} 使用 useTransition 钩子,React.js 继续显示没有用户详细信息的用户界面,直到用户详细信息准备好,但 UI 是响应式的。...在传统渲染中,整个 UI 会在每次击键时暂停直到它可以重新渲染屏幕。在此期间,即使我们继续打字,用户输入不会更新。 下图显示可中断渲染。在可中断渲染中,用户可以继续输入。

6.2K20

如何在 Windows 10上创建和运行批处理文件

如何在 Windows 10上创建批处理文件 创建批处理(脚本或批处理脚本)文件的过程很简单。你只需要一个文本编辑器和一些基本的命令行知识。...点击下一步按钮 使用开始设置,确认开始运行任务的日期和时间 使用每月下拉菜单来选择一年中你想要运行任务的月份。 使用天或上下拉菜单来确认任务将运行的天。...点击下一步按钮 选择 启动程序 选项以运行批处理文件。 在程序或脚本字段中,单击 浏览 按钮 选择您创建的批处理文件,点击下一步按钮。...单击 完成 按钮 这些说明涵盖了使用任务计划程序创建基本任务的步骤。如果希望创建更加可定制的任务,请使用以下说明。...(或单击粘贴快捷方式以创建批处理文件的快捷方式。) 重启电脑 完成这些步骤后,每次登录到 Windows 10时,批处理文件将执行运行所包含的命令。

26.1K40

React Native开发之调试

Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...执行控工具 从上图可以看到“执行控工具”按钮在侧板顶部,让你可以按步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。...跳出(Step out): 当你进入一个函数后,你可以点击 Step out 执行函数余下的代码跳出该函数。...编辑断点(Edit Breakpoint):通过该功能你可以创建一个条件断点,你也可以在边栏(gutter line) 右键选择添加条件断点(Add Conditional Breakpoint) 。...仅当条件为真时,执行会在此暂停。 ? 附:React Developer Tools插件使用

3.8K80

React Native程序调试

Sources 面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...执行控工具 从上图可以看到“执行控工具”按钮在侧板顶部,让你可以按步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。...跳出(Step out): 当你进入一个函数后,你可以点击 Step out 执行函数余下的代码跳出该函数。...编辑断点(Edit Breakpoint):通过该功能你可以创建一个条件断点,你也可以在边栏(gutter line) 右键选择添加条件断点(Add Conditional Breakpoint) 。...仅当条件为真时,执行会在此暂停。 ? 附:React Developer Tools插件使用

3.6K60

js中三种弹出框

,在页面上弹出对话框显示一句话“上联:山石岩下古木枯”,如下所示: 接着,单击确认按钮后再显示第二个对话框显示“白水泉边少女妙!”...,效果如下; 在页面上弹出对话框显示一句话“上联:山石岩下古木枯”,单击确认按钮后再显示第2个对话框显示“白水泉边少女妙!”...注意:两个对话框是分别显示的,而不是一个覆盖另一个,这是因为js实在执行完第一个alert()等到用户点击“确认按钮之后才去执行第二个alert()的。...“确认按钮,则confirm()方法会返回true,如果用户单击“取消”按钮,则confirm()方法会返回false,无论用户选择哪个按钮,都会关闭对话框,而继续执行javascript代码。...c、通过if语句来使用con的值,分别执行不同的语句;执行的效果如下: 如果单击页面的确认框上的“确定”按钮后,出现如下图所示的页面: 如果单击“取消”按钮,则出现如下图所示的页面: 第三种: prompt

9.5K50

WebDriverIO教程:处理Selenium中的警报和覆盖

这些警报或JavaScript警报会弹出,使您的注意力从当前的浏览器上移开,迫使您阅读它们。如果您不知道如何处理警报,则将无法执行任何进一步的浏览器操作,这对于手动和自动都适用。...1、警报弹出 2、确认提示 3、提示弹出 警报弹出窗口 弹出警报或alert()方法将显示一个仅带有消息和“确定”按钮的警报框。该警报用于通知用户一些信息。信息文本仅显示一个按钮“确定”。...在此,用户只有一个选项可以按“确定”按钮。以下是警报弹出的示例。 确认提示 确认警报是带有消息的第二种警报,它使用户可以选择按“确定”或“取消”。这是确认警报的示例。...它可以帮助用户单击“警报”弹出窗口上的“确定”按钮。...警报只能通过预期的操作关闭,而覆盖模式可以通过单击背景上的任意位置来关闭。现在,我将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态时,您不必处理特殊的代码或类。

5.8K30

WebDriverIO教程:处理Selenium中的警报和覆盖

这些警报或JavaScript警报会弹出,使您的注意力从当前的浏览器上移开,迫使您阅读它们。如果您不知道如何处理警报,则将无法执行任何进一步的浏览器操作,这对于手动和自动都适用。...警报弹出 确认提示 提示弹出 警报弹出窗口 弹出警报或alert()方法将显示一个仅带有消息和“确定”按钮的警报框。该警报用于通知用户一些信息。信息文本仅显示一个按钮“确定”。...在此,用户只有一个选项可以按“确定”按钮。以下是警报弹出的示例。 ? 确认提示 确认警报是带有消息的第二种警报,它使用户可以选择按“确定”或“取消”。这是确认警报的示例。 ?...它可以帮助用户单击“警报”弹出窗口上的“确定”按钮。...警报只能通过预期的操作关闭,而覆盖模式可以通过单击背景上的任意位置来关闭。现在,我将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态时,您不必处理特殊的代码或类。

6.2K10

SAP应用界面开发-工具栏对象GUI Status与GUI Title

下面介绍如何在程序中创建一个工具栏按钮,并为其分配Function Key。   1.选择Application ToolBar中一个文本框,输入自定义名称,如下图: ?   ...4.设置完成后,单击 ? 按钮,系统将弹出Assign Function To Function Key对话框,由用户为新增按钮分配一快捷键。 ?   5.选择某功能键字段后单击 ?...按钮(或双击该功能键字段),进入相关确认页后返回设置主界面,设置其它功能按钮。   ..."获取所操作按钮的功能代码(FUNCTION Code),针对不同按钮事件判断执行不同的操作 WHEN 'EXTRACT'....2.单击 ? 按钮确认后,在对象菜单中将显示所新增项,如下图: ?   3.保存激活,在程序中通过语法SET TITLEBAR 调用该GUI Title,如下: ?

4.5K20

深入JavaScript之BOM、DOM和事件

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。...如果用户点击确定按钮,则方法返回true 如果用户点击取消按钮,则方法返回false prompt() 显示可提示用户输入的对话框。...事件监听机制 概念 概念:某些组件被执行了某些操作后,触发某些代码的执行。 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了 事件源:组件。如: 按钮 文本输入框… 监听器:代码。...onkeypress 某个键盘按键被按下松开。 选择和改变 onchange 域的内容被改变。 onselect 文本被选中。 表单事件 onsubmit 确认按钮被点击。...如何绑定事件 直接在html标签上,指定事件的属性(操作),属性值就是js代码 事件:onclick— 单击事件 通过js获取元素对象,指定事件属性,设置一个函数 代码: <img

2.9K30

如何使用适用于Linux 2和Windows Terminal的Windows子系统

查找“适用于Linux的Windows子系统”选中该复选框。给Windows一两分钟来激活该功能。完成后,单击下一步显示的重启机器按钮。 ? 接下来,转到Windows应用商店安装Ubuntu。...图像安装完成后,系统将提示您在此shell中创建新的root用户帐户: ? 创建凭据后,可以随意键入任何Linux命令以确认您是否真正访问了本机Linux shell: ?...您可以将其固定为“开始”以便更快地访问 打开命令提示符或Windows PowerShell执行命令 bash 在Windows资源管理器中,SHIFT+右键单击文件夹以打开特殊的上下文菜单...Node.js安装完成后,尝试全局安装npm软件包以确认它是否正常工作。 您还可以导航到Windows驱动器上的现有Node.js项目,尝试运行它以确认它正在运行。...只要单击+号,就会使用默认终端创建一个新选项卡。使用下拉菜单,您可以选择其他类型的终端。 ? 如果单击“ 设置”,将打开JSON的默认编辑器。

3.7K20
领券