JS多种方法实现随机颜色;
JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色。实现随机颜色的方法有多种,下面来看看具体的实现代码:
方法一:
var getRandomColor = function() {
return '#' +
(function(color) {
return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
})('');
}
随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛;其实分解开来,代码相当于:
function _g(color) {
if ((color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6)) {
return color
} else {
return arguments.callee(color);
}
}
var getRandomColor = function() {
return '#' + _g('');
}
首先从getRandomColor函数里面传过来一个空字符串,首先连接上'0123456789abcdef'字符串里面随机的一个字母,也就是这段代码:color += '0123456789abcdef'[Math.floor(Math.random()*16)];
然后判断color这个变量的长度是不是为6,因为标准的颜色值是一个长度为6的字符串,第一次执行为1,所以不满足,执行问号后面的arguments.callee(color);自调用;
方法二:
var getRandomColor = function() {
return (function(m, s, c) {
return (c ? arguments.callee(m, s, c - 1) : '#') +
s[m.floor(m.random() * 16)]
})(Math, '0123456789abcdef', 5)
}
把Math对象,用于生成hex颜色值的字符串提取出来,并利用第三个参数来判断是否还继续调用自身。
方法三:
//随机颜色,十六进制方法;
function getRandomColor( ) {
var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);
if(rand.length == 6){
return rand;
}else{
return getRandomColor();
}
}
这个方法用到了十六进制与十进制的转换,我们熟知的颜色值比如#ffffff这种写法是十六进制颜色写法,将其转换为十进制之后得到16777215;转换代码如下:
var a="#ffffff"
console.log(parseInt(a.slice(1),16)) // ==> 16777215
然后我们再将16777215转换为十六进制,可以得到ffffff,前面的#号在十六进制中就是0x,所以就有了上面代码中的0xFFFFFF了;
var a=16777215
console.log(a.toString(16)) // ==> ffffff
方法四:HSL模式颜色随机;
var getRandomColor = function() {
return "hsl(" + Math.round(Math.random() * 360) + "," + Math.round(Math.random() * 100) + '%,' + Math.round(Math.random() * 100) + '%)';
}
方法五:RGB模式随机;
var getRandomColor = function() {
return "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')';
}
方法六:RGB模式随机另外一种方法;
var getRandomColor = function () {
var r = Math.round(Math.random() * 255), g = Math.round(Math.random() * 255), b = Math.round(Math.random() * 255);
var color = r << 16 | g << 8 | b;
return "#" + color.toString(16)
}
JS多种方法实现随机颜色;的更多相关文章
- js:多种方法实现数组去重
面试的时候数组去重要多种方法实现, 只想到一种判断重复删除的方法,而且还没写对.后来大概看了一下网上的方法. 下午想到一个网上没见过的filter方法,于是整理了一下,基于以前看到的思想,然后用了一些 ...
- js 给样式添加随机颜色
下面提供了三种获取随机颜色值的方法 方法一: 创建一个颜色 HEX 值数组,然后随机抽取这个数组里6个值,组合生成颜色. function color1(){ var color = "&q ...
- js多种方法取数组的最后一个元素
一: pop()方法 pop()方法,删除数组最后一个并返回该元素 利用这个方法可以取到数组的最后一个,同理shift()可以取到数组的第一个(shift()删除数组第一个并返回该元素) var ar ...
- 用 js 写一个获取随机颜色的程序
function getColor(){ var color="#"; for(var i=0;i<6;i++){ color+=(Math.random()*16 | 0) ...
- 原生js实现的一个随机颜色的简单效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- JS中取整以及随机颜色问题
前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的 ...
- JS实现“隐藏与显示”功能(多种方法)
1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...
随机推荐
- 在Qt中使用AnyCAD三维建模控件
AnyCAD C++ SDK专为Qt框架增加了AnyPlatformQt.lib模块,在Qt中使用AnyCAD三维建模控件变得十分简单. 下载 Qt高速下载:http://pan.baidu.com/ ...
- SAP实际成本与物料帐
[ittype-SAP帮主]: SAP实际成本与物料帐->Beginning Inventory [库存数量,标准价值,差异] (上一期结转) 收到(Receipts) -->Pro ...
- 【项目相关】MVC中将WebUploader进行封装
昨天初步将webuploader用在了项目中,但紧接着就发现了一个问题,每一个页面都需要写那么多初始化webUploader的代码,这样肯定是我不能接受的,于是花了半天时间对该控件进行了封装. 最后, ...
- Everyday is an Opportunity
Quote Of The Day: “Everyday is an Opportunity to Learn and Grow, Don’t Waste Your Opportunity.” – Al ...
- Linux搭建NFS提供磁盘给Windows使用
在Windows2008系统下设置挂载Linux服务器磁盘 一.系统环境 系统平台:CentOS release 5.8 (Final) NFS Server IP:X....X...153.157 ...
- 安装elasticsearch
安装elasticsearch 来自:http://www.cnblogs.com/huangfox/p/3541300.html 一)安装elasticsearch 1)下载elasticsea ...
- webshell + xss 猥琐刷某投票
团队成员发来一个投票的地址,需要撸某某网站的一个某某投票,果断看了下,ip限制了,看到post 数据包 额 随便找个大流量shell post 数据 Js代码代码 <script type=&q ...
- Android消息推送完美方案[转]
转自 Android消息推送完美方案 推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原因,Android消息推送我们不得不大费周折.本文就是用来 ...
- Nginx安装第二步手动下载依赖包
nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...
- 射击比赛 (POJ 1719) 题解
[问题描述] 我们假设射击的目标是一个由R*C(2≤R≤C≤ 1000)个小方格组成的矩形网格.网格中每一列恰有2个白色的小方格和R-2个黑色的小方格.定义网格的行从顶至底编号为1~R,列从左至右编号 ...