javascript如何设置DIV背景色为随机色
2017-11-07 16:16
225 查看
随机色有两种格式:
我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。
效果预览: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
CSS
JS
我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。
效果预览: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; }
JS
<script> (function(){ //1、随机色的函数-rgb function 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、随机颜色#XXXXXX var 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>
了解更多http://click.aliyun.com/m/34312/
相关文章推荐
- javascript如何设置DIV背景色为随机色
- javascript如何设置DIV背景色为随机色
- javascript如何设置DIV背景色为随机色
- 一个DIV,如何设置多个背景色(可能是图片,可能是渐变,可能是图片与渐变的混合)
- 【转】一个DIV,如何设置多个背景色(可能是图片,可能是渐变,可能是图片与渐变的混合)
- 如何用javaScript设置文本框的背景色
- 博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色
- 如何将Label的背景色设置成透明
- 如何将DataGrid中任意行背景色设置为#00A000?
- android-沉浸状态栏以及状态栏背景色如何设置
- div大小如何改变设置
- 不设置div的宽度 如何实现居中
- JavaScript根据图片加载成功后高度设置DIV的高度
- 知道一个div的宽高背景色,如何不通过写在行间样式的办法更改样式?currentStyle(只兼容ie),getComeputedStyle(兼容)-->获取非行间样式
- javascript获取设置div的高度和宽度
- 每日总结:DIV弹层遮盖、DIV设置透明背景色、JS调用SharePoint 中的SP.UI.ModalDialog弹出遮盖层显示
- DIV+CSS制作网页之如何设置z-index position:relative
- 如何将div中的内容设置为空同时还要保留div本身
- 如何优雅使用Sublime Text3(Sublime设置豆沙绿背景色和自定义主题)
- DIV中滚动条设置到随机位置(CSS+Javascript)