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

不带库的JavaScript自定义确认函数

是一种在前端开发中用于确认用户操作的函数。它不依赖于任何库或框架,可以直接在JavaScript代码中实现。

以下是一个简单的不带库的JavaScript自定义确认函数的示例:

代码语言:txt
复制
function customConfirm(message, callback) {
  // 创建确认对话框的容器元素
  var confirmContainer = document.createElement('div');
  confirmContainer.className = 'confirm-container';

  // 创建确认消息元素
  var messageElement = document.createElement('p');
  messageElement.textContent = message;
  confirmContainer.appendChild(messageElement);

  // 创建确认按钮元素
  var confirmButton = document.createElement('button');
  confirmButton.textContent = '确认';
  confirmButton.addEventListener('click', function() {
    // 调用回调函数,传递确认结果为true
    callback(true);
    // 移除确认对话框
    document.body.removeChild(confirmContainer);
  });
  confirmContainer.appendChild(confirmButton);

  // 创建取消按钮元素
  var cancelButton = document.createElement('button');
  cancelButton.textContent = '取消';
  cancelButton.addEventListener('click', function() {
    // 调用回调函数,传递确认结果为false
    callback(false);
    // 移除确认对话框
    document.body.removeChild(confirmContainer);
  });
  confirmContainer.appendChild(cancelButton);

  // 将确认对话框添加到页面中
  document.body.appendChild(confirmContainer);
}

// 使用示例
customConfirm('确定要删除这条记录吗?', function(result) {
  if (result) {
    // 用户点击了确认按钮
    console.log('执行删除操作');
  } else {
    // 用户点击了取消按钮
    console.log('取消删除操作');
  }
});

这个自定义确认函数接受两个参数:确认消息和回调函数。在函数内部,创建了一个确认对话框的容器元素,并向其中添加了确认消息、确认按钮和取消按钮。点击确认按钮会调用回调函数,并传递确认结果为true;点击取消按钮会调用回调函数,并传递确认结果为false。确认对话框会被添加到页面中,用户可以根据需要进行确认操作。

这种自定义确认函数可以用于各种前端开发场景,比如在删除操作前确认用户意图、在提交表单前确认数据的正确性等。腾讯云提供的与此相关的产品是腾讯云前端部署相关服务,详细信息请参考腾讯云前端部署产品介绍:https://cloud.tencent.com/product/sfe

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

相关·内容

javascript——为自己编写更健壮API函数

最近在看书时候,阅读了关于使用JavaScript在代码设计时需要注意文章,对我启发很大,于是决定记录一些其中知识点,一是分享自己获取到知识,二是辅助记忆,让我以后更注意地去编写更健壮JavaScript...第二个需要我们记住规则是函数有时应该接受关键字对象作为参数。 现在我们假设我们要设计一个第三方弹窗,我们有一个弹窗对象Alert。...,构造函数就是这样了,这样看还是比较清晰呢。...opts.modal; this.message = message; } 再往后优化的话,还可以使用一些库里extend方法了,由于并不是标准方法,我在这里也就不讲下去了。...希望这些分享能给初学JavaScript同学一点帮助。

72130

常用数据库函数_数据自定义函数

1.COALESCE(); 很多人知道ISNULL函数,但是很少人知道Coalesce函数,人们会无意中使用到Coalesce函数,并且发现它比ISNULL更加强大,其实到目前为止,这个函数的确非常有用...2,…值n,返回值n,缺省值) 该函数含义如下: IF 条件=值1 THEN     RETURN(翻译值1) ELSIF 条件=值2 THEN     RETURN(翻译值2)     …...这个函数运行结果是,当字段或字段运算值等于值1时,该函数返回值2,否则返回值3 当然值1,值2,值3也可以是表达式,这个函数使得某些sql语句简单了许多 其实它用法和case when then...有一点需要大家注意是MySQLdocode函数用法和oracle有所不同,这里就不一一赘述了… 3.SUBSTRING(); SUBSTRING ( expression, start, length...请勿使用包含聚合函数表达式。 start 整数或可以隐式转换为 int 表达式,指定子字符串开始位置,索引是从1开始。

95130

10 - JavaScript函数 & 11 - JavaScript函数种类

原文地址:https://dev.to/bhagatparwinder/functions-in-javascript-5ehm 什么是函数?它在 JavaScript 中扮演什么角色?...函数就是 JavaScript 中可以被执行代码块。函数有如下必备部分: 1. 使用 function 关键字声明; 2. 函数名字紧跟其后,它就是被调用时使用名字。 3....JavaScript 自带函数 你不是要经常写函数JavaScript 自带了许多可以直接使用方法。...函数声明在其他代码执行之前被加载,然而函数表达式只有等到 JavaScript 解释器执行到所在代码行时才被加载。这就是 JavaScript 中 hoisting[1] 原理。...,它们没有与 this、arguments、super、new.target,我们将在接下来 JavaScript 文章中温习这写概念。

2.8K20

JavaScript 函数定义

一、关于函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含代码语句。 比如我们有一个特定功能需要三条语句实现 ?...这叫做函数声明(Function Declaration)。 3.2 注意 (1)JavaScript 对大小写敏感。...4.2 匿名函数表达式 以表达式方式定义函数函数名称是可选,下面是匿名函数一个例子,也就是函数没有名字 ?...需要注意是,函数表达式需要在语句结尾加上分号,表示语句结束。而函数声明在结尾大括号后面不用加分号。 五、函数声明和函数表达式区别 5.1 说明 (1)如果不声明函数名称,他肯定是表达式。...第一次是解析常规javascript代码,第二次解析传入构造函数字符串,影响性能。 ? 阅读更多 参考文章 深入理解JavaScript系列(2):揭秘命名函数表达式

1.1K30

JavaScript parseInt() 函数

parseInt() 函数可解析一个字符串,并返回一个整数。 parseInt 可以接受 2 个函数。...如果 radix 是 undefined、0或未指定JavaScript会假定以下情况: 如果输入 string以 "0x"或 “0x”(一个0,后面是小写或大写X)开头,那么radix被假定为...为了算术目的,NaN 值不能作为任何 radix 数字。你可以调用isNaN函数来确定parseInt结果是否为 NaN。如果将NaN传递给算术运算,则运算结果也将是 NaN。...要将一个数字转换为特定 radix 中字符串字段,请使用 thatNumber.toString(radix)函数。 总结 通常我们都会使用 parseInt 来转换成一个 10 进制数。...https://www.ossez.com/t/javascript-parseint/13811

1.5K00

JavaScript构造函数

在Java语言中,我们使用构造函数是实例化对象过程,在JavaScript语言中我们可以使用构造函数方式创建对象,如: let obj = new LanguageFun("javaScript")...与面向对象语言不同,JavaScript使用构造函数创建对象不是真正意义上实例化,而是通过new操作符调用构造函数。...构造函数执行过程: 1. 创建一个新对象obj 2. obj被执行原型链[[prototype]]连接 3. obj绑定到函数调用this上 4....没有其他返回对象,则返回obj 包括我们知道内置函数Number(), String()都可以使用new操作符创建新对象,这种函数JavaScript中称为构造函数调用。...,产生异常,所以我们需要对JavaScript构造函数进行兼容改造。

99270

JavaScript函数prototype

函数原型(prototype)概念在JavaScript中,每个函数都有一个特殊属性称为"prototype"。函数原型是一个指向原型对象指针,该原型对象包含可以由该函数实例共享属性和方法。...通过函数原型,您可以向JavaScript对象添加新属性和方法,这些属性和方法可以在该对象所有实例之间共享。当您创建一个对象实例时,该实例会自动继承原型对象属性和方法。...函数原型(prototype)用法要使用函数原型,您可以通过在函数上使用"prototype"属性来定义新属性和方法。...需要注意是,尽管我们只在构造函数原型上定义了"greet"方法,但所有通过该构造函数创建实例都可以访问和使用这个方法。这是因为JavaScript会自动将原型对象中属性和方法添加到每个实例中。...函数原型(prototype)继承另一个重要概念是函数原型继承。在JavaScript中,每个对象都有一个内部链接到其原型对象属性,称为"proto"。

26140

mysql自定义函数_mysql执行自定义函数

函数简介 mysql 5.0开始支持函数函数是存在数据一段sql集合,调用函数可以减少很多工作量, 减少数据在数据和应用服务器上传输,对于提高数据处理效率。...参数类型为in类型,函数必须有返回值, 与oracle等其他库函数参数类型有区别,如果做数据迁移,或许需要将函数改变成存储过程, 因为mysql存储过程参数包括in,out,inout三种模式。...; sql中使用函数: SELECT user_main_fn(1) FROM DUAL; mysql中函数创建特别注意两点: (1) 需要定义定界符,否则是创建不了函数,因为mysql见到’分号...(2)mysql创建函数是没有or replace 这个概念,这个地方与创建视图不同。 在函数中,运行包含DDL语句,允许提交或回滚,函数中可以调用其他函数或存储过程。...函数中变量使用 MySql中变量从5.1后不区分大小写。

3.1K20

JavaScript函数基础

函数能让开发者把JavaScript代码变得更有效率,而且更能重复吃用。函数解决思路:把大问题变成小问题,分割思路。...函数语法: 函数类型1: function Name(){ Body } 函数以function关键字开始,Name为函数名字,Body是函数主体即为所有工作发生区域。带有参数函数。...函数Body可以访问参数,此时这些参数就像已经完成初始化工作局部变量。 注意:函数传递参数很像函数内部局部变量,但在函数内部改变函数参数,却不影响函数任何事物。 具有返回值函数。...前端开发原则一: 结构(html),样式(css)和行为(JavaScript)分离。 内容:网页HTML代码,它提供网页实际上如何拼接在一起结构,同时也是网页数据所在地。...外观:网页css代码,它主要改变内容样式,决定字体,色彩和排版最终效果。 功能:驱动网页、带来交互性JavaScript代码。

1.5K60

JavaScript箭头函数

前言 本文可以让你了解所有有关JavaScript箭头函数信息。我们将告诉你如何使用ES6箭头语法,以及在代码中使用箭头函数时需要注意一些常见错误。你会看到很多例子来说明它们是如何工作。...JavaScript箭头函数随着ECMAScript 2015发布而到来,也被称为ES6。由于其简洁语法和对this关键字处理,箭头函数迅速成为开发者们最喜爱功能。...如果你函数使用隐式返回来返回一个对象字面量,你需要使用圆括号来包裹该对象字面量。不这样做将导致错误,因为JavaScript引擎将对象字面量大括号错误地解析为函数大括号。...它们从父级继承this值,正是因为这个特点,在上面这种情况下就是很好选择。 不正常工作情况 箭头函数并不只是在JavaScript中编写函数一种花里胡哨新方法。...另一个需要注意问题是,第三方通常会绑定方法调用,因此this值会指向一些有用东西。

2.1K20

JavaScript|箭头函数用法

问题描述 JavaScript ES6标准新增了比较重要一种新函数:Arrow Function(箭头函数),但大多数人都不能很好了解箭头函数用法,也不能区别箭头函数和function(),所以接下来我们就来介绍一下箭头函数...解决方案 1 箭头函数写法 () => {}//举例x => x*2 //x返回值变成x*2值 箭头函数定义包括一个参数列表,函数体放在最后。...同时箭头函数看上去是匿名函数(它们没有用于递归或者事件绑定 / 解绑定命名引用)一种简写,但实际上,箭头函数和匿名函数有个明显区别:箭头函数内部this是词法作用域,由上下文确定。...3 箭头函数与function()函数区别 通过上面对于箭头函数讲解就可以发现虽然有时候可以将function()函数变为箭头函数,但两者还是有很大区别的: a.箭头函数体内this对象,就是定义时所在对象...function()函数,在使用时候一定要注意箭头函数本身没有this,它this是根据上下文指向语法作用域,所以小编在此建议,如果你还想用this,就最好不要用使用箭头函数写法哦。

72220
领券