工作日记:JavaScript生成随机色

2023-10-26

不多啰啰,直接上硬货!

/**
 * 获取指定闭区间的随机数
 * @param min 最小值
 * @param max 最大值
 * @returns {number}
 */
export function getRandomNum(min, max) {
  let result;
  if (min <= max) {
    result = Math.floor(Math.random() * (max - min + 1) + min);
  } else {
    result = Math.floor(Math.random() * (min - max + 1) + max);
  }
  return result;
}

/**
 * 获取随机颜色
 * @param alpha 透明度
 * @returns {string} 返回rgba颜色
 */
export function randomRGBA(alpha) {
  const r = getRandomNum(0, 255);
  const g = getRandomNum(0, 255);
  const b = getRandomNum(0, 255);
  return `rgba(${r},${g},${b},${alpha})`;
}

/**
 * 获取随机冷色
 * 颜色设计思路:R值 === 50,0 <= G值 <= 255, 150 <= B值 <= 255,这样随机出来的冷色更加柔和,不会产生刺眼的感觉
 * @param alpha 透明度
 * @returns {string} 返回rgba颜色
 */
export function randomCoolColor(alpha) {
  const r = 50;
  const g = getRandomNum(0, 255);
  const b = getRandomNum(150, 255);
  return `rgba(${r},${g},${b},${alpha})`;
}

/**
 * 获取随机暖色
 * 颜色设计思路:R值 === 255,0 <= G值 <= 230, B值 === 50 ,这样随机出来的暖色更加柔和,不会产生刺眼的感觉
 * @param alpha 透明度
 * @returns {string} 返回rgba颜色
 */
export function randomWarmColor(alpha) {
  const r = 255;
  const g = getRandomNum(0, 230);
  const b = 50;
  return `rgba(${r},${g},${b},${alpha})`;
}

/**
 * 获取随机色透明渐变效果,函数输入两个透明度,随机色根据透明度参数进行渐变
 * @param alpha1 透明度1
 * @param alpha2 透明度2
 * @returns {string[]}返回随机色透明渐变效果的数组
 */
export function randomTransparentGradient(alpha1, alpha2) {
  const r = getRandomNum(0, 255);
  const g = getRandomNum(0, 255);
  const b = getRandomNum(0, 255);
  return [`rgba(${r},${g},${b},${alpha1})`, `rgba(${r},${g},${b},${alpha2})`];
}

/**
 * 获取随机冷色透明渐变效果,函数输入两个透明度,随机色根据透明度参数进行渐变
 * 颜色设计思路:R值 === 50,0 <= G值 <= 255, 150 <= B值 <= 255,这样随机出来的冷色更加柔和,不会产生刺眼的感觉
 * @param alpha1 透明度1
 * @param alpha2 透明度2
 * @returns {string[]}返回随机色透明渐变效果的数组
 */
export function randomTransparentCoolGradient(alpha1, alpha2) {
  const r = 50;
  const g = getRandomNum(0, 255);
  const b = getRandomNum(150, 255);
  return [`rgba(${r},${g},${b},${alpha1})`, `rgba(${r},${g},${b},${alpha2})`];
}

/**
 * 获取随机暖色透明渐变效果,函数输入两个透明度,随机色根据透明度参数进行渐变
 * 颜色设计思路:R值 === 255,0 <= G值 <= 230, B值 === 50 ,这样随机出来的暖色更加柔和,不会产生刺眼的感觉
 * @param alpha1 透明度1
 * @param alpha2 透明度2
 * @returns {string[]}返回随机色透明渐变效果的数组
 */
export function randomTransparentWarmGradient(alpha1, alpha2) {
  const r = 255;
  const g = getRandomNum(0, 230);
  const b = 50;
  return [`rgba(${r},${g},${b},${alpha1})`, `rgba(${r},${g},${b},${alpha2})`];
}

/**
 * 获取随机渐变色
 * @param alpha 透明度
 * @returns {string[]}返回随机渐变色数组
 */
export function randomGradient(alpha) {
  const r = getRandomNum(0, 255);
  const g = getRandomNum(0, 255);
  const b = getRandomNum(0, 255);
  return [`rgba(${r},${g},${b},${alpha})`, `rgba(${r},${g},${b},${alpha})`];
}

/**
 * 获取随机渐变冷色
 * 颜色设计思路:R值 === 50,0 <= G值 <= 255, 150 <= B值 <= 255,这样随机出来的冷色更加柔和,不会产生刺眼的感觉
 * @param alpha 透明度
 * @returns {string[]}返回随机渐变色数组
 */
export function randomCoolGradient(alpha) {
  const r = 50;
  const g = getRandomNum(0, 255);
  const b = getRandomNum(150, 255);
  return [`rgba(${r},${g},${b},${alpha})`, `rgba(${r},${g},${b},${alpha})`];
}

/**
 * 获取随机渐变暖色
 * 颜色设计思路:R值 === 255,0 <= G值 <= 230, B值 === 50 ,这样随机出来的暖色更加柔和,不会产生刺眼的感觉
 * @param alpha 透明度
 * @returns {string[]}返回随机渐变色数组
 */
export function randomWarmGradient(alpha) {
  const r = 255;
  const g = getRandomNum(0, 230);
  const b = 50;
  return [`rgba(${r},${g},${b},${alpha})`, `rgba(${r},${g},${b},${alpha})`];
}

/**
 * 获取随机暖色渐变到随机冷色
 * 暖色设计思路:R值 === 255,0 <= G值 <= 230, B值 === 50 ,这样随机出来的暖色更加柔和,不会产生刺眼的感觉
 * 冷色设计思路:R值 === 50,0 <= G值 <= 255, 150 <= B值 <= 255,这样随机出来的冷色更加柔和,不会产生刺眼的感觉
 * @param warmColorAlpha 暖色透明度
 * @param coolColorAlpha 冷色透明度
 * @returns {string[]}返回随机渐变色数组
 */
export function randomWarmColorToRandomCoolColor(warmColorAlpha, coolColorAlpha) {
  const wr = 255;
  const wg = getRandomNum(0, 230);
  const wb = 50;
  const cr = 50;
  const cg = getRandomNum(0, 255);
  const cb = getRandomNum(150, 255);
  return [`rgba(${wr},${wg},${wb},${warmColorAlpha})`, `rgba(${cr},${cg},${cb},${coolColorAlpha})`];
}

/**
 * 获取随机冷色渐变到随机暖色
 * 暖色设计思路:R值 === 255,0 <= G值 <= 230, B值 === 50 ,这样随机出来的暖色更加柔和,不会产生刺眼的感觉
 * 冷色设计思路:R值 === 50,0 <= G值 <= 255, 150 <= B值 <= 255,这样随机出来的冷色更加柔和,不会产生刺眼的感觉
 * @param coolColorAlpha 冷色透明度
 * @param warmColorAlpha 暖色透明度
 * @returns {string[]}返回随机渐变色数组
 */
export function randomCoolColorToRandomWarmColor(coolColorAlpha, warmColorAlpha) {
  const wr = 255;
  const wg = getRandomNum(0, 230);
  const wb = 50;
  const cr = 50;
  const cg = getRandomNum(0, 255);
  const cb = getRandomNum(150, 255);
  return [`rgba(${cr},${cg},${cb},${coolColorAlpha})`, `rgba(${wr},${wg},${wb},${warmColorAlpha})`];
}

// 随机冷色渐变到另一个随机冷色可通过两个randomCoolColor方法实现,因此不再额外封装。
// 随机暖色渐变到另一个随机暖色可通过两个randomWarmColor方法实现,因此不再额外封装。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

工作日记:JavaScript生成随机色 的相关文章

  • WebGL iOS 渲染为浮点纹理

    我正在尝试在 iOS Safari 上的 WebGL 中渲染浮点纹理 而不是在本机应用程序中 我已经设法让 iOS 读取手动 例如从 JavaScript 创建的浮点纹理 但是当我创建浮点类型的帧缓冲区并使用 GPU 渲染到其中时 它不起作
  • 在 Javascript 中,有什么方法可以知道从哪个主机脚本加载?

    在javascript中 作为从某个主机加载的脚本 有什么方法可以知道我是从哪个服务器 主机加载的 我需要向该主机发出额外的 ajax 请求 并且更愿意动态地找出主机 因此 如果您在页面上包含 javascript 文件 当该 javasc
  • moment.calendar() 没有时间

    我想使用不带时间的 moment calendar 选项 所以而不是 上周二下午 5 点 我想要 上周二 有人知道 Moment 现在是否有解决方案吗 我找到了这个小提琴http jsfiddle net nawxZ http jsfidd
  • jQuery - 将所有展开的文本包装在 p 标签中

    我遇到以下情况 以下代码被写入我的页面 div Some text here which is not wrapped in tags p Some more text which is fine p p Blah blah another
  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • 如何检测不渲染 .png 透明的浏览器

    我有这段代码可以根据一周中的某一天渲染图像 但在 IE6 及更低版本以及可能其他一些浏览器中 它不会呈现 png 不透明度 所以我想稍微改变一下 这样它就会检测到不渲染 alpha 透明度的浏览器 并告诉他们加载这个图像 img horar
  • 如何使用 AngularJS、Devise 和 UI Router 全局实现身份验证?

    我对 Angular 很陌生 所以这可能是一个新手问题 我正在尝试实现一个简单的任务管理器 只是一个练习 以 Rails 作为后端 以 Angular 作为前端 到目前为止 我遵循了教程 一切正常 现在我想在全球范围内实施身份验证 这意味着
  • 解释 javascript 中的奇怪行为

    我在推特上看到了这个 我也无法解释 定义一个onload函数按以下两种方式工作 1 JSFiddle http jsfiddle net 6rq9k 2 JSFiddle http jsfiddle net 6rq9k 1
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 有什么方法可以在不重新加载的情况下更改标头 URL? [复制]

    这个问题在这里已经有答案了 可能的重复 修改URL而不重新加载页面 https stackoverflow com questions 824349 modify the url without reloading the page 使用新
  • JQuery 可排序嵌套可排序 div

    这个问题与这个有关Nest jQuery UI 可排序 https stackoverflow com questions 19129476 nest jquery ui sortables 但我无法解决我的问题 问题是 我有一个包含项目的
  • 无法读取setInterval(Hooks)中的最新状态变量[重复]

    这个问题在这里已经有答案了 我想这是因为 JS 的工作原理 但我想你不会在类中遇到这个问题 在此代码中 let open setOpen React useState false let counter setCounter React u
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • 是否可以让 webpacks System.import 使用 ajax (用于进度事件)?

    所以我刚刚更新到 webpack 2 并进行了第一个工作设置 其中 webpack 通过查看 System import 调用自动创建块 相当甜蜜 但是 我使用 ajax 调用加载初始块 以便我可以加载时显示进度 https stackov
  • 在部分渲染时执行 JavaScript

    我有一些 JavaScript 代码 我想在用户单击其文件夹之一后执行 它会触发 show 操作和 show js erb 从而呈 现部分内容 Show js erb 当用户单击其文件夹之一时触发 如下所示 body append 它成功注
  • 需要根据用户选择有条件地渲染具有 X 行数的部分

    我有一个反应组件 其中包含一个下拉列表 其中的选项包括none 1 5 and 13 根据用户选择的数字 我需要渲染一个部分 其中包括许多行 每个行都有字段名称和下拉列表 如果用户不选择任何一个 我需要整个附加配置部分消失 新部分中的每个下
  • 在 React JSX 中返回配对元素

    问题 在 React 中 您希望通过映射数组来创建 DOM 结构 但数组中的每个项目应返回 2 个元素 例如 import React from react import from lodash let Component React ex
  • 通过ajax执行后期操作时如何克服CORS重定向问题?

    我可以通过外部登录表单中的 post 方法类型提交表单来登录 roundcube 实例 托管在另一台服务器上 我收到此错误 通过 ajax 签名时 XMLHttpRequest 无法加载https 192 168 0 7 mail http

随机推荐

  • 纯C语言实现数据结构顺序表

    文章目录 一 顺序表的概念及结构 二 顺序表的实现 1 顺序表的创建 2 顺序表初始化 3 顺序表销毁 4 顺序表打印 5 检查空间 如果满了 进行增容 6 尾部插入一个数据 7 头部插入一个数据 8 尾部删除一个数据 9 头部删除一个数据
  • Python+selenium爬虫启用chrome无头浏览器

    因为使用Selenium执行爬虫任务时 必须要启动浏览器 浏览器的启动与关闭必然会影响执行效率 并且会干扰到其它操作 本机运行时 所以采用Chrome 浏览器的headless Browser模式完美解决该问题 Headless模式 Hea
  • 【从零开始的Java开发】1-5-2 包装类与基本数据类型、常用API、基本数据类型与包装类、字符串之间的转换、包装类的初始值与比较、对象常量池

    文章目录 包装类与基本数据类型 包装类常用方法 基本数据类型与包装类之间的转换 基本数据类型和字符串之间的转换 包装类相关知识 包装类的初始值 包装类对象间的比较 对象常量池 总结 包装类与基本数据类型 Java的数据类型 其中 基本数据类
  • 7-7 长方形 (20 分)

    7 7 长方形 20 分 小明今天学习了长方形 小明想知道用一根长度为n的绳子 可以围成多少种长宽不等 非正方形 的长方形 要求长方形的边长均为整数 输入格式 在一行中给出1个n 表示绳子的长度 输出格式 输出一个正整数表示不同长方形的数量
  • 【转】虚拟机网络服务启动失败Failed to start LSB 解决方法

    场景 克隆了一个虚拟机后不能重启它的网络服务编辑IP配置文件 vi etc sysconfig network scripts ifcfg ens33重新修改了ip后 发现还是报错如下 错误信息 Failed to start LSB 网络
  • java中根据某一属性比较两个list集合是否相同

    创建两个示例列表 List
  • 二叉树前中后序遍历非递归实现

    前序遍历 public static void prifixOrder TreeNode root System out print 前序遍历 Stack
  • XSS-9注入靶场闯关(小游戏)——第九关

    1 这个关卡与第八关相同 直接把编码放上去尝试 之前的payload也无法使用 106 97 118 97 115 99 114 105 112 116 58 97 108 101 114 116 40 49 41 2 输入一个正常连接查看
  • Subscriber class .NewsFragment and its super classes have no public methods

    使用EventButs3 0 0 出现以下错误 Caused by de greenrobot event EventBusException Subscriber class com gozap beacontower ui NewsFr
  • 【C++初阶】简析拷贝构造、赋值运算符重载

    hello 各位读者大大们你们好呀 系列专栏 C 学习与应用 本篇内容 构造函数的概念与特征 基本使用方法 运算符重载 赋值运算符重载 前置 后置 的使用 作者简介 计算机海洋的新进船长一枚 请多多指教 同期文章 C 初阶 简析构造函数 析
  • 告别代码复制粘贴,傻瓜式提取 PyTorch 中间层特征

    内容导读 特征提取是图像处理过程中常需要用到的一种方法 其效果好坏对模型的泛化能力有至关重要的影响 特征提取 Feature extraction 在机器学习 模式识别和图像处理中应用广泛 它从初始的一组测量数据开始 建构出提供信息且不冗余
  • C# Modbus CRC校验

    Modbus CRC校验 直接输入byte 输出bool public static bool CRC Check byte byteData bool Flag false byte CRC new byte 2 UInt16 wCrc
  • React 深入系列1:React 中的元素、组件、实例和节点

    React 深入系列 深入讲解了React中的重点概念 特性和模式等 旨在帮助大家加深对React的理解 以及在项目中更加灵活地使用React React 中的元素 组件 实例和节点 是React中关系密切的4个概念 也是很容易让React
  • 从0搭建react项目

    一 快速开始 全局安装脚手架 npm install g create react app 复制代码 通过脚手架搭建项目 create react app lt 项目名称 gt 复制代码 开始项目 cd lt 项目名 gt npm run
  • 音频-什么是PCM编码格式?

    PCM中文称脉冲编码调制 Pulse Code Modulation 是70年代末发展起来的 记录媒体之一的CD 在80年代初由飞利浦和索尼公司共同推出 脉码调制的音频格式也被DVD A所采用 它支持立体声和5 1环绕声 1999年由DVD
  • 正则表达式-----小数点后允许有两位数字

    校验是否全由数字组成 function isDigit s var patrn 0 9 1 20 if patrn exec s return false return true 校验登录名 只能输入5 20个以字母开头 可带数字 的字串
  • eclipse关联spring源码

    在Eclipse中如何关联spring framework的文档和源代码 1 到官方网站去下载spring framework的jar包 spring framework jar包的下载地址是 http repo spring io rel
  • 解决ubuntu18.04卡在“starting Gnome Display Manager“

    我提前安装了ssh 所以可以ssh进行下面的操作 如果你没有 你可以进入命令行 或者其他模式进行下面的操作 好多人都遇到这个问题 我提前说下 安装驱动之前 最好安装个ssh ssh 怎么用自己百度吧 这样万一你的电脑卡住了 你找个别人的电脑
  • autoApprove

    服务端最主要的一个配置就是使用 EnableAuthorizationServer 注解 该注解的作用就是引入了一些 OAuth2 相关的端点 包含以下的端点 AuthorizationEndpoint 根据用户认证获得授权码 有下面两个方
  • 工作日记:JavaScript生成随机色

    不多啰啰 直接上硬货 获取指定闭区间的随机数 param min 最小值 param max 最大值 returns number export function getRandomNum min max let result if min