javascript实现随机生成DIV背景色
更新时间：2016年06月20日 09:34:22 作者：九成
这篇文章主要介绍了javascript实现随机生成DIV背景色的具体代码，如何设置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;
}
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
这篇文章主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
本文主要介绍了页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置的两种方案，需要的朋友可以看下2016-12-12
下面小编就为大家带来一篇基于原生js运动方式关键点的总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细总结了手机图片预览插件photoswipe.js使用方法，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JavaScript中textRange对象使用方法小结,需要的朋友可以参考下2015-03-03
今天来聊一下JavaScript中的对象访问器,JavaScript的主要功能之一是能够定义对象,这些对象可以封装属性和方法,本文将深入探讨 JavaScript 对象访问器是什么、它是如何工作的以及使用对象访问器的作用,需要的朋友可以参考下2024-06-06
web开发js字符串拼接占位符及conlose对象Api详解
本篇文章主要为大家介绍了web开发中字符串的拼接，占位符的使用以及conlose对象Api的使用，有需要的朋友可以借鉴参考下，希望可以有所帮助2021-09-09
javascript动画效果类封装代码...2007-08-08
bootstrap table表格插件之服务器端分页实例代码
Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。这篇文章主要介绍了bootstrap table表格插件之服务器端分页实例代码,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了JavaScript如何编写简单的计算器，功能很简单，可以实现加减乘除功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论