工作日记：JavaScript生成随机色
2024-06-09 11:35:59
不多啰啰，直接上硬货！
/*** 获取指定闭区间的随机数* @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方法实现，因此不再额外封装。
工作日记：JavaScript生成随机色相关推荐
- 用html js制作迷宫,JavaScript生成随机迷宫详解
本篇教程介绍了JavaScript生成随机迷宫详解,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < #先看生成随机迷宫的代码吧↓ 1 2 3 生成随机迷宫v ...
- javascript生成随机四位数
在网页编程中,经常会用到随机数,像生成订单号这些都会用到. 今天小编分享的是使用javascript生成随机四位数,以下为实例代码. <input type="button" ...
- JavaScript 生成随机验证码
JavaScript 生成随机验证码 文章目录 JavaScript 生成随机验证码 Math对象下 random方法
- element table row-style 实现列颜色区分 以及 js生成随机色，避免相近色
实现仓库看板需求遇到的问题 table 显示的不同订单生产编码同时下线字体用不同颜色区分 随机生成颜色,不能过于相似,避免灰颜与过暗 步骤 需要实现不同的订单号展示不同的颜色.之前有使用 " ...
- javaScript 生成随机字母 随机数字的5种方法
对于伪随机数,JS 有很多种玩法来生成我们所需要的伪随机数.根据上下限生成随机数:var rand = (min,max) => Math.round(Math.random()*(max-mi ...
- JavaScript生成随机订单编号或者订单号
基于时间生成的随机订单号,具有唯一性 代码: function setTimeDateFmt(s) { // 个位数补齐十位数return s < 10 ? '0' + s : s; }func ...
- web前端面试宝典-JavaScript生成随机字符串
- js生成rgb随机色（JavaScript函数生成rgb随即色）
定义函数方法 方便调用: function choseRgb() {// Math.random是生成0-1之间的随机数 *256 的范围就变成0.xx-255.7// Math.floor 向下取整 ...
- php生成随机验证码
1.创建一个code.php文件,来生成随机验证码图片 1 <?php 2 /** 3 * Created by PhpStorm. 4 * User: ping 5 * Date: 2018/ ...
最新文章
- bootcmd 和 bootargs 环境变量
- MyBatis在insert插入操作时返回主键ID
- Fibonacci Tree HDU - 4786——解题报告
- .NET Core 下使用 RabbitMQ
- python join_python join 和 split的常用使用方法
- c语言编程统计单词的个数,使用c语言如何统计单词个数
- fedora如何删除某个包且不删除依赖它的相关包
- 70. 爬楼梯（JavaScript）
- python约瑟夫生死小游戏的实现
- HIT Software Construction Review Notes (chapter three)
- Java多线程第三节-线程的正确停止
- 闲聊人工智能产品经理（AIPM）—人工智能产品经理的行业理解
- fastLane 初试
- 企业如何做好网址安全，防止入侵。
- 怎么将自己的头像p到特定的背景图_怎么把自己的头像和背景分离出来：用ps抠图...
- 前端实现导入PPT在线编辑
- LIS2MDL磁力计驱动
- 从零开始的2D游戏开发 —— 像素方块生成器
- 第十二章 NandFlash驱动移植
- 跨国企业在中国 | 通济隆在上海设新亚太总部；劳氏船级社战略合作中国石油安全环保研究院...