生成引人注目色彩的小型Javascript脚本——randomColor
wxin55 2025-05-08 21:45 1 浏览 0 评论
介绍
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!
相关推荐
- js获取上传文件类型以及大小的方法
-
前端web上传文件时,需要在上传之前判断一下文件的类型以及文件的大小,HTML为前端的标记语言是无法做到这一点,只能使用javascript动态脚本代码来实现。js获取上传文件大小的方法示例代码:&...
- 资源分享:移动设备类型判断JS(什么叫移动设备)
-
相信很多童鞋在实际开发中都会遇到需要判断设备类型来进行不同页面跳转处理,例如手机端访问移动页面,pc端访问pc页面亦或是ios和安卓扫描同一个二维码跳转至不同的下载页面。有这样一种做法当然了你可以使用...
- JS学习笔记:三、数据类型(js六中数据类型)
-
上节知识点回顾:1.什么是变量2.变量的声明3.一次性声明多个变量并赋值4.变量名的规范5.变量的使用本讲内容:数据类型1.数据类型分类原始类型(基本类型)+引用类型原始类型:数字、字符串、布尔类...
- JavaScript中常用数据类型,你知道几个?
-
本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型,当然这并不是JavaScr...
- JS自有类型系统的问题区分竟如此简单?
-
嗨,我是勾勾。今天想要和你分享的是如何区分强弱类型与JS自有类型系统的问题。类型系统的区分我们在区分不同编程语言时会有一些界定的标准。通常来讲,我们会从类型安全和类型检查上进行区分。类型安全强类型弱类...
- 抛弃 typeof,这样判断 JavaScript 类型更准确
-
JavaScript作为一门动态类型语言,类型判断一直是开发者面临的常见挑战。众所周知,typeof操作符存在诸多局限性,无法准确区分数组、对象、null等类型。那么,有没有更精确、更优雅的类型判断方...
- 有哪些好玩的 Python 代码?(python有什么好玩的项目)
-
Python是一门非常强大且灵活的编程语言,它不仅可以用来编写复杂的软件应用,还能用来创造一些有趣的小程序和游戏。以下是一些好玩的Python代码示例,涵盖了基础语法、字符串处理、图形绘制等多个...
- Python统计快乐8的两码组合数据随机新的两码三码
-
我们利用Python统计出快乐8的两码组合数据,来生成新的快乐8选二,选三等组合fromcollectionsimportCounterimportrandom#输入新的快乐8两码统计...
- 10 个鲜为人知的 Python 可视化概念和技巧
-
数据可视化可视化是我们以各种可视化形式描述数据的操作,从图表、图形到信息图形。它是探索性数据分析(EDA)中最重要的部分之一,因为它使我们能够轻松掌握变量之间的关系以及对后期特征工程和建模有用的数...
- 用Python搞个随机简单的迷宫(python做迷宫)
-
为了增加一点趣味打发鼓噪的情绪,玩个简单的迷宫,方便以后搞游戏迷宫。堵路的就简单用#符号吧,如果弄成界面的话可以用图片来,比图墙的图片。因为是随机的,不是固定的一个迷宫,我们少不了random模块...
- 面试干货——某度Python面试题,转发收藏
-
目录1、Python是如何进行内存管理的?2、什么是lambda函数?它有什么好处?3、Python里面如何实现tuple和list的转换?4、请写出一段Python代码实现删除一个list里面的重复...
- Python while循环深度解析:从基础到实战,一文全掌握!
-
一、循环的本质:重复执行的魔法在编程世界中,循环是实现自动化的核心工具。想象你需要重复做100次相同的事情,手动编写100次代码显然不现实。这时候,循环就像一位不知疲倦的助手,帮你完成重复性任务。Py...
- 如何在 Python 中随机排列列表元素
-
在本教程中,我们将学习在Python中如何打乱列表元素顺序,随机排列列表元素。如何随机排列列表是一项非常有用的技能。它在开发需要选择随机结果游戏中非常有用。它还适用于数据相关的工作中,可能需要提取...
- Python快速入门教程7:循环语句(python循环语句有哪些)
-
一、循环语句简介循环语句用于重复执行一段代码块,直到满足特定条件为止。Python支持两种主要的循环结构:for循环和while循环。二、for循环基本语法for循环用于遍历序列(如列表、元组、字符串...
- 用Python进行机器学习(6)随机森林
-
上一节我们讲到了决策树这个算法,但是一棵决策树可能会存在过拟合的现象,而且对数据微小的变化也比较敏感,为了解决这些问题,我们可以通过多棵树的方式,也就是今天要介绍的随机森林。随机森林算法也就是Rand...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)