JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色。实现随机颜色的方法有多种,下面来看看具体的实现代码:

方法一:

  1. var getRandomColor = function() {
  2.  
  3. return '#' +
  4. (function(color) {
  5. return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
  6. })('');
  7. }

随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛;其实分解开来,代码相当于:

  1. function _g(color) {
  2.  
  3. if ((color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6)) {
  4. return color
  5. } else {
  6. return arguments.callee(color);
  7. }
  8. }
  9. var getRandomColor = function() {
  10. return '#' + _g('');
  11. }

首先从getRandomColor函数里面传过来一个空字符串,首先连接上'0123456789abcdef'字符串里面随机的一个字母,也就是这段代码:color += '0123456789abcdef'[Math.floor(Math.random()*16)];

然后判断color这个变量的长度是不是为6,因为标准的颜色值是一个长度为6的字符串,第一次执行为1,所以不满足,执行问号后面的arguments.callee(color);自调用;

方法二:

  1. var getRandomColor = function() {
  2.  
  3. return (function(m, s, c) {
  4. return (c ? arguments.callee(m, s, c - 1) : '#') +
  5. s[m.floor(m.random() * 16)]
  6. })(Math, '0123456789abcdef', 5)
  7. }

把Math对象,用于生成hex颜色值的字符串提取出来,并利用第三个参数来判断是否还继续调用自身。

方法三:

  1. //随机颜色,十六进制方法;
  2. function getRandomColor( ) {
  3. var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);
  4. if(rand.length == 6){
  5. return rand;
  6. }else{
  7. return getRandomColor();
  8. }
  9. }

这个方法用到了十六进制与十进制的转换,我们熟知的颜色值比如#ffffff这种写法是十六进制颜色写法,将其转换为十进制之后得到16777215;转换代码如下:

  1. var a="#ffffff"
  2. console.log(parseInt(a.slice(1),16)) // ==> 16777215

然后我们再将16777215转换为十六进制,可以得到ffffff,前面的#号在十六进制中就是0x,所以就有了上面代码中的0xFFFFFF了;

  1. var a=16777215
  2. console.log(a.toString(16)) // ==> ffffff

方法四:HSL模式颜色随机;

  1. var getRandomColor = function() {
  2. return "hsl(" + Math.round(Math.random() * 360) + "," + Math.round(Math.random() * 100) + '%,' + Math.round(Math.random() * 100) + '%)';
  3. }

方法五:RGB模式随机;

  1. var getRandomColor = function() {
  2. return "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')';
  3. }

方法六:RGB模式随机另外一种方法;

  1. var getRandomColor = function () {
  2. var r = Math.round(Math.random() * 255), g = Math.round(Math.random() * 255), b = Math.round(Math.random() * 255);
  3. var color = r << 16 | g << 8 | b;
  4. return "#" + color.toString(16)
  5. }

JS多种方法实现随机颜色;的更多相关文章

  1. js:多种方法实现数组去重

    面试的时候数组去重要多种方法实现, 只想到一种判断重复删除的方法,而且还没写对.后来大概看了一下网上的方法. 下午想到一个网上没见过的filter方法,于是整理了一下,基于以前看到的思想,然后用了一些 ...

  2. js 给样式添加随机颜色

    下面提供了三种获取随机颜色值的方法 方法一: 创建一个颜色 HEX 值数组,然后随机抽取这个数组里6个值,组合生成颜色. function color1(){ var color = "&q ...

  3. js多种方法取数组的最后一个元素

    一: pop()方法 pop()方法,删除数组最后一个并返回该元素 利用这个方法可以取到数组的最后一个,同理shift()可以取到数组的第一个(shift()删除数组第一个并返回该元素) var ar ...

  4. 用 js 写一个获取随机颜色的程序

    function getColor(){ var color="#"; for(var i=0;i<6;i++){ color+=(Math.random()*16 | 0) ...

  5. 原生js实现的一个随机颜色的简单效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  6. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  7. JS中取整以及随机颜色问题

    前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的 ...

  8. JS实现“隐藏与显示”功能(多种方法)

    1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  9. js判断移动端是否安装某款app的多种方法

    本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...

随机推荐

  1. 图解Javascript上下文与作用域

    原文网址:http://blog.rainy.im/2015/07/04/scope-chain-and-prototype-chain-in-js/ 本文尝试阐述Javascript中的上下文与作用 ...

  2. 【风马一族_mysql】MySQL免安装版环境配置图文教程

    mysql存放在某一个磁盘中(笔者使用E盘) 配置系统变量 打开 电脑的属性 点击 高级系统设置 选择 高级 点击 环境变量 选择 系统变量 点击 变量Path,追加 值 E:\mysql-5.6.2 ...

  3. CSS优先级算法是如何计算?

    CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...

  4. js对文章内容进行分页示例代码

    这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...

  5. c#音乐播放器(欣赏)

    设置界面 Mini模式 播放器使用C#编写,用到了大量的自定义控件,播放是调用windows API. 现在只是完成了本地音乐功能,下一步我将要做歌词同步及网络音乐 当然,完成以后我将一步一步教大家做 ...

  6. linu流量监控

    iftophttp://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858923.html 默认是监控第一块网卡的流量iftop 监控eth1iftop ...

  7. 显示或隐藏一个Grid

    The Rowset class contains two methods that can be used to show and hide all rows: ShowAllRows() Hide ...

  8. C# 随机颜色的方法

    public string GetRandomColor() { Random RandomNum_First = new Random((int)DateTime.Now.Ticks); // 对于 ...

  9. php安装redis扩展连接redis服务器

    扩展包的下载地址:https://github.com/nicolasff/phpredis/archive/2.2.4.tar.gz tar xf phpredis-2.2.4.tar.gz cd ...

  10. ERROR 1045 (28000): Access denied for user root@localhost (using password:

    错误描述: Mysql中添加用户之后可能出现登录时提示ERROR 1045 (28000): Access denied for user的错误.删除user.user中值为NULL的,或更新NULL ...