使用JS生成随机的Web安全色
- 7639
- jQuery
- 29
- super_dodo
- 2016/10/14
今天想到需要给每篇文章加上标签,类似标签云,但是统一色调的标签云不美观。这个时候就想到了随机生成每个标签的背景颜色。请看示例图片:
如果想知道网站的配色方案请异步浏览WEB网站网页设计常用色彩搭配表
获取随机颜色
function getRandomColor() { return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); } [/php] 获取随机安全色:这里使用16进制来表示颜色,例如白色的#FFFFFF,黑色的#000000,Web安全色主要由00,33,66,99,CC,FF组成,因此,总的颜色总数就是6*6=216种,先产出所有可能的情况(216种),放于数组中,然后再生成一个1-216的随机数,最后使用array[random]的形式随机返回一个数组成员,就算成功了。下面贴出代码: [php] function getRandomSafeColor() { var base = ['00','33','66','99','CC','FF']; //基础色代码 var len = base.length; //基础色长度 var bg = new Array(); //返回的结果 var random = Math.ceil(Math.random()*215+1); //获取1-216之间的随机数 var res; for(var r = 0; r < len; r++){ for(var g = 0; g < len; g++){ for(var b = 0; b < len; b++){ bg.push('#'+base[r].toString()+base[g].toString()+base[b].toString()); } }; }; for(var i=0;i<bg.length;i++){ res = bg[random]; } return res; } [/php] 二者的应用也很简单,比如给某个元素设置背景色: [php] document.getElementById('btn-load').style.background = getRandomColor(); document.getElementById('btn-load').style.background = getRandomSafeColor(); [/php] 结束语:随机颜色应用还挺广泛的,比如各类网站的标签云,最后放出一个Web安全色的网站,里面颜色很纯正,适合应用于各类设计.也可以查看一些固定的风格的色彩组装成色彩组,随机取。 <img src="http://www.dodobook.net/wp-content/uploads/2016/10/Web_tag20161014175506.png" alt="Web_tag20161014175506" width="433" height="219" class="alignnone size-full wp-image-3093" /> 完整示例HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用JS生成随机的Web安全色</title> <style type="text/css"> div{font-family:"Microsoft Yahei";font-size:16px;color:#fff;width:100px;line-height:50px;padding:0 10px;float:left;margin: 5px;text-align:center;border-radius: 5px;} </style> </head> <body> <div id="btn-load-0">读读书</div> <div id="btn-load-1">PHP</div> <div id="btn-load-2">MySQL</div> <div id="btn-load-3">HTML5</div> <div id="btn-load-4">Yii2</div> <div id="btn-load-5">螃蟹壳</div> <div id="btn-load-6">小蚁窝</div> <div id="btn-load-7">黑山老妖</div> <script type="text/javascript"> //获取随机颜色就一行代码 function getRandomColor() { return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); } //获取随机安全色 function getRandomSafeColor() { var base = ['00','33','66','99','CC','FF']; //基础色代码 var len = base.length; //基础色长度 var bg = new Array(); //返回的结果 var random = Math.ceil(Math.random()*215+1); //获取1-216之间的随机数 var res; for(var r = 0; r < len; r++){ for(var g = 0; g < len; g++){ for(var b = 0; b < len; b++){ bg.push('#'+base[r].toString()+base[g].toString()+base[b].toString()); } }; }; for(var i=0;i<bg.length;i++){ res = bg[random]; } return res; } document.getElementById('btn-load-0').style.background = getRandomColor(); document.getElementById('btn-load-1').style.background = getRandomSafeColor(); document.getElementById('btn-load-2').style.background = getRandomSafeColor(); document.getElementById('btn-load-3').style.background = getRandomSafeColor(); document.getElementById('btn-load-4').style.background = getRandomSafeColor(); document.getElementById('btn-load-5').style.background = getRandomSafeColor(); document.getElementById('btn-load-6').style.background = getRandomSafeColor(); document.getElementById('btn-load-7').style.background = getRandomSafeColor(); </script> </body> </html>
相关阅读
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
热门文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
最新文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例