阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

JavaScript生成随机颜色值的两种方式方法

为了营造网页的绚丽效果,有时候会使用让一些文本或者是元素每次刷新都呈现出不同的颜色样式,阿萌此次就来说一说两种实现随机颜色值的概念方法。

此次介绍的两种思路是这样的:
①利用数组或者是文本先定义好部分颜色值,然后随机抽取。
②利用随机函数通过特殊定义来生成颜色值。

第一种,通过数组先定义几个需求的颜色值,然后随机抽取,这样用的比较多,毕竟万一随机到不舒服的颜色还会给网站造成负面效果。


<span id="coo1">我是颜色</span>
<script type="text/javascript">
var getColorArr = new Array("000000","D600FF","FF0000","0000FF","00A836");
var getRandomColor = '#' + getColorArr[Math.floor(Math.random()*getColorArr.length)];
document.getElementById('coo1').style.color=getRandomColor;
</script>

效果浏览:我是颜色

第二种,这种方法也比较简便,其实纵观颜色值,从#000000到#ffffff。看到这我们就应能联想到十六进制,那么我们就可以通过随机产生6位的十六进制数来作为颜色值。


<span id="coo2">我是颜色</span>
<script language="javascript">
var getRandomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
document.getElementById('coo2').style.color=getRandomColor;
</script>

效果浏览:我是颜色

其实还有其他方式随机生成颜色值的,例如定义字符串“0~F”,然后循环随机抽取一个字符,但是其实方式都差不多,我也就不多说了,如果有不理解的或者觉得代码有缺陷的,希望联系我探讨和改进,谢谢。

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=416

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切