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

在javascript中计算对比色

在JavaScript中,计算对比色可以通过计算RGB颜色值的相对亮度来实现。以下是一个简单的JavaScript函数,用于计算给定颜色的对比色:

代码语言:javascript
复制
function getContrastColor(color) {
  const r = parseInt(color.substr(1, 2), 16);
  const g = parseInt(color.substr(3, 2), 16);
  const b = parseInt(color.substr(5, 2), 16);
  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
  return (yiq >= 128) ? '#000000' : '#FFFFFF';
}

在这个函数中,我们首先从输入的颜色字符串中提取RGB值,然后使用亮度公式计算出亮度值。如果亮度值大于等于128,则返回黑色(#000000),否则返回白色(#FFFFFF)。

例如,如果我们要计算颜色#3399FF的对比色,我们可以这样调用函数:

代码语言:javascript
复制
const color = '#3399FF';
const contrastColor = getContrastColor(color);
console.log(contrastColor); // 输出:#000000

在这个例子中,亮度值大于等于128,因此返回黑色作为对比色。

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

相关·内容

  • .NET Core 运行 JavaScript

    一.前言 .NET Framework 时,我们可以通过V8.NET等组件来运行 JavaScript,不过目前我看了好几个开源组件包括V8.NET都还不支持 .NET Core ,我们如何在 .NET...Core 运行 JavaScript 呢,答案是使用 NodeServices。...关于为何有 .NET Core 执行 JavaScript 这种需求,比较特殊,举个栗子:当你做模拟登录时,目标网站可能采用一些加密算法来计算特殊的值,如果你要完全模拟,那么除了用C#翻译这个算法还有个办法就是直接将这段加密算法...二.什么是 NodeServices NodeServices 是一个 ASP.NET Core 中间件,将它添加到 ASP.NET Core 管道,该中间件调用Node在运行时执行JavaScript...首先,我们将首先创建一个包含返回问候消息的 NodeJs module 的简单JavaScript文件,保存在 scripts/greeter.js文件: // greeter.js module.exports

    3.9K20

    Chrome DevTools 调试 JavaScript

    函数断点 由浅入深说一说怎么样 Chrome DevTools 调试 JavaScript。 一、案发现场 为了方便理解,我写了一个小demo。...我们就在 Sources 面板调试 JavaScript。... 文件预览 窗口中选择文件后,此处会显示该文件的具体内容。 JavaScript 调试 窗口。 包含检查页面 JavaScript 的各种工具。...接下来我们开始思考一开始抛出的程序的运作方式,我们可以根据经验推测出,我们点击num1+num2按钮的时候触发的 click 事件肯定和 6+9=69 计算不正确有关系。...我们可以将任何有效的 JavaScript 表达式存储监视表达式。 我们尝试这样: - 点击 Watch 标签。 - 点击 右边的 + 添加表达式。 - 输入 typeof n。

    5K20

    现代 JavaScript 编写异步任务

    Node.js 开辟了一个不同环境甚至 web 之外编写 JavaScript 的新时代。当然异步的情况也是可能的,例如创建新目录或写文件。...对返回值进行的后续操作无需存储不会破坏代码节奏的 mkdir 之类的变量;也无需以后的步骤创建新的作用域来访问 result 的值。...可以肯定地说,Promise 是该语言中引入的基本工件,对于 JavaScript 启用 async/await 表示法是必需的,你可以现代浏览器和最新版本的 Node.js 中使用它。...我们仍然不知道 ECMAScript 规范几年后的样子,因为我们一直JavaScript 治理扩展到 web 之外,并尝试解决更复杂的难题。...与十年前刚刚开始浏览器编写代码时相比,我觉得现在 JavaScript 是“异步友好”的。

    2.4K30

    JavaScript 对数组进行排序

    排序是您在学习JavaScript时将使用的众多基本方法之一。让我们回顾一下如何对不同的数据类型使用排序方法。 ---- 字符串 默认情况下, 排序方法按字母顺序组织其元素。...(在后面的示例,此示例将有一个更广泛的版本!在此示例,我们将使用 slice() 并将带有注入数字的字符串转换为数字。这样,我们就可以对所有数组元素进行排序,其中每个元素都是相同的数据类型。...本例,我们将使用正则表达式。 正则表达式(Regex)是组成搜索模式的字符序列。搜索模式可用于文本搜索和文本替换操作。 (当第一次面对Regex时,它真的很吓人。我个人还是觉得很困惑。...撇开外观不讲,它是一种高可用性和强大的代码类型,许多情况下都很有用。)...{id: 5, name: 'Sade'} {id: 8, name: 'Nicolette'} {id: 9, name: 'Megan'} */ 个人笔记: 正则表达式真的很酷,但到目前为止,我的职业生涯

    4.8K70

    【译】如何避免JavaScript阻塞DOM

    原文链接:https://www.sitepoint.com/avoiding-dom-blocking/ 浏览器和在诸如Node.js的运行时环境JavaScript程序是运行在单线程上的。...例如:当一个按钮被点击后触发了一个事件,这个事件执行一个函数,函数内进行了一些计算并更新DOM。一旦完成,浏览器便空闲下来,从任务队列取出下一个任务来处理。...阻塞匪徒 不幸的是,一些JavaScript操作总是同步的,包括: 执行计算 更新DOM 使用localStorage或者IndexedDB存储和查询数据 下面的CodePen展示了一个“入侵者”,它组合使用了...大多数场景下,worker被用来执行长时间计算任务——例如光线追踪、图像处理、比特币挖掘等。...注意到因为肢体的摆动是由JavaScript控制的,所以它们仍然会因阻塞而暂停。 内存存储 更新内存的对象要比使用写入磁盘的存储机制快得多。

    2.8K10

    JavaScript的数据结构(队列)

    当我们浏览器打开新标签时,就会创建一个任务队列。这是因为每个标签都是单线程处 理所有的任务,它被称为事件循环。...队列(Queue)是一种具有先进先出(FIFO, First-In-First-Out)特性的数据结构,它可以用于计算机程序管理和存储元素。...JavaScript,可以使用数组(Array)或链表(Linked List)等数据结构来实现队列。 其实可以用窗口排队打饭为案例,先来的先排队打饭。...因此可以对它们使用默认的出列操作: ---- 总结 JavaScript,队列(Queue)是一种具有先进先出(FIFO, First-In-First-Out)特性的数据结构,它可以用于计算机程序管理和存储元素...队列主要有两个基本操作: 入队(enqueue)和出队(dequeue),JavaScript可以使用数组(Array)或链表(Linked List)等数据结构来实现队列。

    27530

    JavaScript的数据结构(链表)

    JavaScript链表是一种数据结构,用于存储和组织一系列的元素。它由一系列节点(Node)组成,每个节点包含了两部分:数据域(存储数据)和指针域(指向下一个节点)。...然而,链表的缺点是访问链表的特定元素的时间复杂度较高,需要从头开始遍历链表直到找到目标节点。 ---- 详细的看一下列表 JavaScript,可以使用对象来实现链表。...this.indexOf = function(element){ let current = head, //循环访问列表变量初始值是head index = -1; //计算位置数 while...remove(element):从列表移除一项。 indexOf(element):返回元素列表的索引。如果列表没有该元素则返回-1。...toString():由于列表项使用了Node类,就需要重写继承自JavaScript对象默认的toString方法,让其只输出元素的值。

    17910

    setImmediate() vs setTimeout() JavaScript 的区别

    setImmediate() vs setTimeout() JavaScript 的区别 JavaScript ,setImmediate() 和 setTimeout() 都用于调度任务...JavaScript 的异步特性 JavaScript 以其非阻塞、异步行为而闻名,尤其是 Node.js 环境。... Node.js ,事件循环处理不同的阶段,每个阶段负责执行某些类型的回调。它帮助管理非阻塞任务,确保函数可以异步执行。在这些阶段,有不同的队列。...相反,它被放置宏任务队列,以便在下一个可用机会执行。 setImmediate() 另一方面,setImmediate() 设计用于 I/O 事件完成后执行回调,同一事件循环迭代。...理解这些差异有助于你精确控制代码的运行时间,这在高性能应用程序至关重要,因为时间和效率非常重要。 参考 setImmediate() vs setTimeout() in JavaScript

    10310

    适配器JavaScript的体现

    适配器JavaScript的体现 适配器设计模式JavaScript中非常有用,处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。...其实在日常开发,很多时候会不经意间写出符合某种设计模式的代码,毕竟设计模式就是老前辈们总结提炼出来的一些能够帮助提升开发效率的一些模版,源于日常的开发。...而适配器其实在JavaScript应该是比较常见的一种了。 维基百科,关于适配器模式的定义为: 软件工程,适配器模式是一种软件设计模式,允许从另一个接口使用现有类的接口。...代码的体现 而转向到编程,我个人是这样理解的: 将那些你不愿意看见的脏代码藏起来,你就可以说这是一个适配器 接入多个第三方SDK 举个日常开发的例子,我们在做一个微信公众号开发,里边用到了微信的支付模块...,官方已经实现了类似这样的工具函数:util.promisify 小结 个人观点:所有的设计模式都不是凭空想象出来的,肯定是开发的过程,总结提炼出的一些高效的方法,这也就意味着,可能你并不需要在刚开始的时候就去生啃这些各种命名高大上的设计模式

    1.4K10

    JavaScript的数据结构(队列)

    当我们浏览器打开新标签时,就会创建一个任务队列。这是因为每个标签都是单线程处理所有的任务,它被称为事件循环。...队列(Queue)是一种具有先进先出(FIFO, First-In-First-Out)特性的数据结构,它可以用于计算机程序管理和存储元素。...JavaScript,可以使用数组(Array)或链表(Linked List)等数据结构来实现队列。其实可以用窗口排队打饭为案例,先来的先排队打饭。...因此可以对它们使用默认的出列操作:图片总结在JavaScript,队列(Queue)是一种具有先进先出(FIFO, First-In-First-Out)特性的数据结构,它可以用于计算机程序管理和存储元素...队列主要有两个基本操作: 入队(enqueue)和出队(dequeue),JavaScript可以使用数组(Array)或链表(Linked List)等数据结构来实现队列。

    28420

    .NET 应用程序运行 JavaScript

    一想到要再次处理 Node.js 和 npm,我就完全放弃了,所以我决定研究一下 .NET 应用程序运行 JavaScript 的可能性。很疯狂吧?实际上,这出乎意料的简单。...或者......我们直接从我们的 .NET 应用程序调用 JavaScript 2 .NET 运行 JavaScript 一旦你决定在你的 .NET 代码运行 JavaScript,你就会考虑几个选择...Jint Jint 很有意思,因为它是一个完全 .NET 运行的 JavaScript 解释器,没有任何本地的依赖!...本节,我将展示如何使用 prism.js 高亮一小段代码,并在一个控制台应用程序运行。...5总结 在这篇文章,我展示了如何使用 JavaScriptEngineSwitcher NuGet 包来 .NET 应用程序运行 JavaScript

    2.6K10

    JavaScript 通过 queueMicrotask() 使用微任务

    它们很相似;都由位于某个队列的 JavaScript 代码组成并在合适的时候运行。但是,只有迭代开始时队列存在的任务才会被事件循环一个接一个地运行,这和处理微任务队列是殊为不同的。...基于现代浏览器的 JavaScript 开发中有一个高度专业化的特性,那就是允许你调度代码跳转到其他事情之前,而那些事情原本是处于用户计算机中一大堆等待发生的事情集合之中的。...简单的传入一个 JavaScript 函数,以 queueMicrotask() 方法处理微任务时供其上下文调用即可;取决于当前执行上下文,queueMicrotask() 以定义的形式被暴露在 Window...何时使用微服务 本章节,我们来看看微服务特别有用的场景。...例子 简单微任务示例 在这个简单的例子,我们将看到入列一个微任务后,会引起其回调函数顶层脚本完毕后运行。

    3.1K10

    javascript对于this指向的再次理解

    那么我们看一下这个例子 var length = 3; function fn () { console.log(this.length) } fn();   函数调用是最外层发生的...浏览器环境下,全局变量和window对象的属性是等价的,所以定义了length全局变量就相当于向window对象添加了一个length属性。...function函数体内的有一个很神奇的对象arguments这个对象是由调用该函数时所传的实参决定的,而不是由定义函数时由形参决定的。...这一点也是javascript语言广为诟病的一点,无法依据定义函数的形参个数来实现方法的重载,只能靠argumengs的length属性来实现。...所以在上面例子,fn 和 3这两个变量都挂载arguments对象下面,还由于arguments是一个类数组对象所以它有length属性,也可以像使用数组一样来使用arguemnts。

    1.3K20

    JavaScript的数据结构(链表)

    JavaScript链表是一种数据结构,用于存储和组织一系列的元素。它由一系列节点(Node)组成,每个节点包含了两部分:数据域(存储数据)和指针域(指向下一个节点)。...然而,大多数语言中这种数据结构有一个缺点:数组的大小是固定的,从数组的起点或中间插入或移除项的成本很高,因为需要移动元素。链表存储有序的元素集合,但不同于数组,链表的元素在内存并不是连续放置的。...然而,链表的缺点是访问链表的特定元素的时间复杂度较高,需要从头开始遍历链表直到找到目标节点。---详细的看一下列表JavaScript,可以使用对象来实现链表。...this.indexOf = function(element){ let current = head, //循环访问列表变量初始值是head index = -1; //计算位置数 while (...remove(element):从列表移除一项。indexOf(element):返回元素列表的索引。如果列表没有该元素则返回-1。

    47120
    领券