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:;
margin:;
}
p{
text-align: center;
margin: 20px;
}
p a{
font-size: 20px;
font-weight:;
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>
javascript如何设置DIV背景色为随机色的更多相关文章
- JS---案例：点击按钮设置div背景色渐变
案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...
- JavaScript动态设置div的样式的方法
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...
- 【转】CSS设置DIV背景色渐变显示
[原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css"> .linear{ ...
- CSS设置DIV背景色渐变显示
本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...
- CSS设置DIV背景色渐变
div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...
- div 背景色设置_DIV背景颜色设置
DIV 背景色设置篇-div背景颜色设置篇 一.div标签内直接设置背景颜色 - TOP <div style="background:#000; color:#FFF&quo ...
- 影响div背景色显示的问题
说来惭愧,走上程序猿这条不归路已经一年了,却连自己的博客都没有.看到道上有脸面的大神博客都做得贼漂亮~~于是,按捺不住了~~ 今天终于开通了博客园博客,正式开始我的博客人生啦!!!~~吼吼~~ 废话少 ...
- Android 使用shape定义不同控件的的颜色、背景色、边框色
Android 使用shape定义不同控件的的颜色.背景色.边框色 设置按钮的右边框和底边框颜色为红色,边框大小为3dp: 在drawable新建一个 buttonstyle.xml的文件,内容如下: ...
- React Native 设置RGBA背景色
React Native 设置RGBA背景色: 可以先用Mac自带吸色工具,获取RGB值,然后设置背景如下: backgroundColor: 'rgba(52, 52, 52, 0.8)', 透明度 ...
随机推荐
- C#设计模式-桥接模式
这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视品牌的遥控 ...
- sql复习第五次
1.在数据库范围内,关系的每一个属性值是不可分解的 关系中不允许出现重复元组 由于关系是一个集合,因此不考虑元组的顺序 2.笛卡儿积是两个关系的所有元组组合而成的,而等值联接是由笛卡儿积和选择运算组合 ...
- SQL Server 日期函数：EOMonth、DateFormat、Format、DatePart、DateName
一,月份的最后一天 函数 EOMonth 返回指定日期的最后一天 EOMONTH ( start_date [, month_to_add ] ) 1,对于start_date 有两种输入方式,能够转 ...
- Join 和 apply 用法
TSQL中的join语句共有五种类型,left join,right join,inner join,full join,cross join 为了描述方便,解释一个名词"保留表" ...
- 轻量级前端MVVM框架avalon源码分析-总结
距avalon0.7版本发布有一段时间,由于之前的稳定性,就停止一段时间更新,期间研究了下Knockout源码,也尝试写了一个小型的mvvm的实现模型,仅仅只是仿造ko的核心实现,把无关的东西给剥离掉 ...
- 记住密码超简单实现（C#）
实现效果如下 实现过程 [Serializable] class User { //记住密码 private string loginID; public string LoginID { get { ...
- jquery ajax（实现单独提交某个form）
function submitTaskScore(formid) {//formid表示的是表单的id $.ajax({ type:"post", url:"compan ...
- Cookie/Session机制详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- java.util.concurrent包详细分析--转
原文地址:http://blog.csdn.net/windsunmoon/article/details/36903901 概述 Java.util.concurrent 包含许多线程安全.测试良好 ...
- kafka源码分析之二客户端分析
客户端由两种:生产者和消费者 1. 生产者 先看一下生产者的构造方法: private KafkaProducer(ProducerConfig config, Serializer<K> ...