网站首页 > 知识剖析 正文
介绍
randomColor是一个生成随机颜色的JavaScript脚本,对于写代码的我们来说,生成一个随机颜色或许并不复杂,但是想要生成一个比较吸引人的随机颜色可能是需要花费一番功夫的,但如果已经有人实现了这样一个小功能,那么我们直接使用即可,不需要再花费心思研究那么深,一起来看看吧!
randomColor已移植到C#,C ++,Go,Haskell,Mathematica,PHP,Python,Swift,Perl6,Objective-C,Java,R,Reason和Rust。
Github地址
https://github.com/davidmerfield/randomColor
使用方式
本文只是简单介绍下在浏览器中使用,我相信在Web开发中使用的还是最多的,我们可以直接使用cdn或者下载脚本下来直接引入:
- 使用
var color = randomColor();
要在服务器上使用带有node.js的randomColor,请从npm安装randomColor,然后调用脚本:
var randomColor = require('randomcolor'); // 引入
var color = randomColor(); // 16进制
- 配置
可以传递配置对象以便于产生特定的结果出来:
hue ——控制生成的颜色的色调。可以传代表颜色名称的字符串:当前支持红色,橙色,黄色,绿色,蓝色,紫色,粉红色和黑白(red, orange, yellow, green, blue, purple, pink 和 monochrome)。如果您传递十六进制颜色字符串(例如#00FFFF),则randomColor将提取其色相值并使用该值生成颜色
luminosity——控制所生成颜色的亮度。您可以指定一个包含亮,亮或暗的字符串(bright, light or dark)。
count——指定要生成的颜色数
seed 一个整数或字符串,该整数或字符串在传递时将导致randomColor每次返回相同的颜色。
format ——指定生成的颜色的格式。可能的值为rgb,rgba,rgbArray,hsl,hsla,hslArray和hex(默认值)。
alpha ——介于0和1之间的十进制数。仅当使用带有alpha通道的格式(rgba和hsla)时才相关。默认为随机值。
- 示例代码
// 返回具颜色的十六进制代码
randomColor();
// 返回十个绿色的数组
randomColor({
count: 10,
hue: 'green'
});
// 返回浅蓝色的十六进制代码
randomColor({
luminosity: 'light',
hue: 'blue'
});
// 返回“真正随机”颜色的十六进制代码
randomColor({
luminosity: 'random',
hue: 'random'
});
// 返回RGB的明亮的颜色
randomColor({
luminosity: 'bright',
format: 'rgb' // e.g. 'rgb(225,200,20)'
});
// 返回带有随机alpha的深色RGB颜色
randomColor({
luminosity: 'dark',
format: 'rgba' // e.g. 'rgba(9, 1, 107, 0.6482447960879654)'
});
// 返回具有指定alpha的深色RGB颜色
randomColor({
luminosity: 'dark',
format: 'rgba',
alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
});
// 返回带有随机Alpha的浅色HSL颜色
randomColor({
luminosity: 'light',
format: 'hsla' // e.g. 'hsla(27, 88.99%, 81.83%, 0.6450211517512798)'
});
总结
randomColor是一个小型JavaScript脚本,虽然功能不多,但是针对颜色这一块还是非常值得使用的,对于大多数场景已经完全够用!enjoy it!
- 上一篇: 计算机启动知识系列 - 一个UEFI例子
- 下一篇: Js基础31:内置对象(js常见内置对象)
猜你喜欢
- 2025-06-15 LeetCode 力扣官方题解 | 380. O(1) 时间插入、删除和获取随机元素
- 2025-06-15 Python Numpy库详细教程(python numpy.pi)
- 2025-06-15 10款好用的开源 HarmonyOS 工具库
- 2025-06-15 HarmonyOS NEXT异步编程在ArkTS中具体怎么实现?
- 2025-06-15 耗电量减少28%,Chrome浏览器更省电了
- 2025-06-15 小时候玩过的打砖块游戏,大神用javascript写出来了
- 2025-06-15 Chrome修复JS引擎随机数没那么随机的问题
- 2025-06-15 用Three.js学习程序化建模(three.js介绍)
- 2025-06-15 数组(I) - 网络统计学(11)(数组总结)
- 2025-06-15 57.6万代码撕碎AI编程神话,20%「幽灵包」暗藏漏洞,苹果、微软已中招
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)