javascript实现随机生成DIV背景色

随机色有两种格式：
效果预览：http://wjf444128852.github.io/DEMOLIST/JS/test/index.html
1、rgb（xxx,xxx,xxx）
2、#xxxxxx
下面实现两种随机的方法
思路：如何让x都是随机的，
1、中的xxx是0-255之间的随机整数，用Math.random（）*255取得0-255之间的随机数，
再Math.floor（）保留小数点前面的
2、中的x是0123456789abxdef中的随机6个的组合，
这里可以用数组或者字符串处理，这里采用数组，只要从数组里取6次，每次取得数组下标是0-16之间的随机整数即可。
注意（法二中虽然改变的是#XXXX，此时浏览器查看DOM元素的background-color属性值还是rgb格式的，但是JS中赋值是#xxx格式。）
代码如下：
HTML

<body><div class="main"><p><a href="javascript:;" id="btn-one">RandomColor-rgb</a></p><ul><li><div class="bg_color"></div></li><li><div class="bg_color"></div></li><li><div class="bg_color"></div></li><li><div class="bg_color"></div></li></ul></div><div class="main"><p><a href="javascript:;" id="btn-two">RandomColor-#XXXXXX</a></p><ul><li><div class="bg_two"></div></li><li><div class="bg_two"></div></li><li><div class="bg_two"></div></li><li><div class="bg_two"></div></li></ul></div></body>

CSS

*{box-sizing: border-box;list-style: none;border: none;padding: 0;margin: 0;}p{text-align: center;margin: 20px;}p a{font-size: 20px;font-weight: 300;color: #e4393c;text-decoration: none;padding: 6px 10px;border: 1px solid currentColor;}.bg_color,.bg_two{width: 100px;height: 100px;border: 1px solid #aa00aa;}.main,.main ul{overflow: hidden;}.main{width: 400px;margin:30px auto;}.main ul li{float: left;}

<script>（function（）{//1、随机色的函数-rgbfunction getRandomColor（）{var rgb="rgb（"+Math.floor（Math.random（）*255）+"," +Math.floor（Math.random（）*255）+","+Math.floor（Math.random（）*255）+"）";console.log（rgb）;return rgb;}//获取按钮var btn_one=document.querySelector（"#btn-one"）;var Divs=document.querySelectorAll（".bg_color"）;btn_one.onclick=function（）{for（var i=0;i<Divs.length;i++）{Divs[i].style.backgroundColor=getRandomColor（）;}};//2、随机颜色#XXXXXXvar btn_two=document.querySelector（"#btn-two"）;var divsTwo=document.querySelectorAll（".bg_two"）;var chars = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];function generateMixed（n） {var res = "#";var id;for（var i = 0; i < n ; i ++） {id= Math.floor（Math.random（）*16）;res += chars[id];}console.log（id,res）;return res;}btn_two.onclick=function（）{for（var i=0;i<divsTwo.length;i++）{divsTwo[i].style.backgroundColor=generateMixed（6）;}};}）（）</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。