JavaScript 颜色渐变

2023-11-26

使用带或不带 Jquery 的 javascript,我需要根据开始和结束颜色创建颜色渐变。这可以通过编程来完成吗?

结束颜色只会是开始颜色的较暗阴影,并且它用于无序列表,我无法控制 li 项目的数量。我正在寻找一种解决方案,允许我选择开始和结束颜色,将十六进制值转换为 RGB,以便可以在代码中对其进行操作。起始 RGB 值按根据项目数量计算的步长值递增。

因此,如果列表有 8 个项目,则需要分 8 个步骤递增单独的红绿蓝值才能获得最终颜色。有没有更好的方法来做到这一点,如果有的话,我在哪里可以找到一些示例代码?


我创建了一个 JS 库,RainbowVis-JS来解决这个普遍问题。您只需使用设置项目数量setNumberRange并使用设置开始和结束颜色setSpectrum。然后你可以得到十六进制颜色代码colourAt.

var numberOfItems = 8;
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, numberOfItems);
rainbow.setSpectrum('red', 'black');
var s = '';
for (var i = 1; i <= numberOfItems; i++) {
    var hexColour = rainbow.colourAt(i);
    s += '#' + hexColour + ', ';
}
document.write(s); 
// gives:
// #ff0000, #db0000, #b60000, #920000, #6d0000, #490000, #240000, #000000, 

欢迎您查看该库的源代码。 :)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 颜色渐变 的相关文章

随机推荐

  • 不同地区不同的认证方式

    我正在开发的网站有两个部分 一个部分使用普通表单身份验证 另一个部分使用基于 HMAC 的身份验证 基于表单的工作方式与正常情况一样 除了使用自定义会员资格提供程序 最令人沮丧的是 默认情况下 如果决定使用表单身份验证 它会将所有 401
  • ASP.NET Web 窗体是否阻止双击提交?

    我正在从事一个 ASP NET 4 0 Web Forms 项目 在中断了大约 5 年之后 我对提交行为感到困惑 在按钮的单击事件中 我使线程休眠 以便可以多次单击提交按钮 据我所知 ASP NET 正在阻止多次调用单击事件 这是真的 顺便
  • 参考折叠规则是什么?C++ 标准库如何利用它们?

    以下链接提供了 4 种形式的参考折叠 如果我正确的话 这些是唯一的 4 种形式 http thbecker net articles rvalue references section 08 html 从链接 A 变成A A 变成A A 变
  • 在Python中将turtle绘制的图像转换为PNG

    我正在用 Python 制作一个抽象艺术模板生成器 它接受最小半径 最大半径和圆数的输入 它在随机的地方绘制随机的圆圈 也满足用户的要求 我想将海龟图形转换为 PNG 以便用户可以随心所欲地编辑模板 但我不知道如何继续 这是我的代码 imp
  • 为什么这些创建引用的方式表现不同?

    下面的代码运行正确 let a mut 3 a 4 assert eq a 4 以下也运行 let a Some 3 let mut b a unwrap assert eq a unwrap 3 但以下内容无法编译 let a Some
  • 通过php流式传输mp3文件

    这是我的 php 代码 用于通过 php 流式传输 mp3 文件 set time limit 0 dirPath path of the directory songCode REQUEST c filePath dirPath song
  • 易失性重载?

    我听说 volatile 和 const 一样是重载的因素 如果函数被易失性参数重载 易失性版本什么时候被调用 我无法想象调用 volatile version 时的情况 这是一个例子 include
  • VS Code SCSS 自动编译为 CSS

    我是编程新手 刚刚开始学习 HTML CSS 对于编码 我开始使用 VS Code 我真的很喜欢它 到目前为止 我遇到的唯一问题是将 SCSS 自动编译为 CSS 我搜索并阅读了许多解决方案 我发现最好的解决方案是在 VS Code 终端中
  • PHP 解析 ISO 格式的日期 [重复]

    这个问题在这里已经有答案了 我目前正在使用 ConstantContact 它返回带有更新字段的 XML 格式如下 2013 02 13T08 35 34 195Z 我假设这是日期 c 格式 如何解析这个格式呢 斯特托时间没有返回正确的值
  • 问:如何在命令提示符下显示汉字

    是否可以在命令提示符下显示中文字符 如果是这样 设置是什么 如果您需要阅读简体中文 GBK 即代码页936 在dos提示符下输入以下命令 chcp 936 Update 微软推出了一个新的终端应用程序 https aka ms termin
  • 在 WPF 窗口的构造函数中,InitializeComponent() 之前和之后应该做什么?

    一般来说 我一直在初始化Window之前的自己InitializeComponent 并设置随后包含的控件 然而 我并没有那么一致 而且我还没有真正注意到排序有问题 所以 我 可能 正在做一些可怕的事情吗 特别是之前设置子控件的属性是否有问
  • 如何将 ABRecordRef 添加到 iPhone 中的 NSMutableArray?

    我想创建一个 ABRecordRef 数组来存储具有有效生日字段的联系人 NSMutableArray bContacts NSMutableArray alloc init ABAddressBookRef addressBook ABA
  • 如何使用
  • 而不是提交按钮提交表单?
  • 我希望能够提交表单 但不必单击提交按钮 我希望能够单击 li 元素并让它提交 任何帮助都会很棒 提前致谢 Ncoder 您可以在 LI 上放置一个 onclick 事件来调用表单提交事件 li
  • Oracle 和 SQL Server select (+) 等效

    在甲骨文中我有 SELECT t2 Regkood t2 naitatel t2 naitafaks t3 lahtiolekuaeg t1 FROM table1 t1 table2 t2 table3 t3 WHERE t1 clien
  • 为什么Java的类型推断这么弱?

    说吧 我有一个方法 public static
  • 如何在oracle数据库中存储BigInteger值

    我已经使用 JDBC 将 Java 程序连接到 Oracle 数据库 我想存储BigInteger数据库中的值 512 位 列的类型应该是什么 我正在尝试这样 我在数据库中获取了一列数字类型 我转换了BigInteger to BigDec
  • 如何在 Swift 中将 url.query 转换为字典?

    我有一个进入 AppDelegate 方法的 URL func application application UIApplication open url URL sourceApplication String annotation A
  • 与在 Rhino Mocks 中使用 Ordered() 等效的 AAA 语法是什么

    我一生都无法找到使用 Rhino 中的 Fluent AAA 语法来验证操作顺序的正确语法 我知道如何使用旧的学校记录 播放语法来做到这一点 MockRepository repository new MockRepository usin
  • Capybara + RSpec 仅在控制器规格中看到空白页。为什么?

    我正在尝试为一个简单的控制器编写控制器规范 但是 Capybara 看不到任何页面内容 但是 在我的浏览器中查看该网站的页面效果很好 我究竟做错了什么 谢谢 我的控制器规格 我的spec helper rb 我的宝石文件 您需要明确告诉您的
  • JavaScript 颜色渐变

    使用带或不带 Jquery 的 javascript 我需要根据开始和结束颜色创建颜色渐变 这可以通过编程来完成吗 结束颜色只会是开始颜色的较暗阴影 并且它用于无序列表 我无法控制 li 项目的数量 我正在寻找一种解决方案 允许我选择开始和