工作日记:JavaScript生成随机色

不多啰啰,直接上硬货!

/**
 * 获取指定闭区间的随机数
 * @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方法实现,因此不再额外封装。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

达娃里氏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值