javascript实现随机生成DIV背景色


Posted in Javascript onJune 20, 2016

随机色有两种格式:
效果预览: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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
javascript 三种编解码方式
Feb 01 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 #Javascript
JS实现弹出居中的模式窗口示例
Jun 20 #Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 #Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 #Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 #Javascript
JS控制层作圆周运动的方法
Jun 20 #Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
用php+mysql一个名片库程序
2006/10/09 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
Laravel find in set排序实例
2019/10/09 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
美国性感女装网站:bebe
2017/03/04 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
教师查摆问题及整改措施
2014/10/11 职场文书
欢迎词怎么写
2015/01/23 职场文书
同学聚会邀请函
2015/01/30 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
Python经常使用的一些内置函数
2022/04/11 Python
python 学习GCN图卷积神经网络
2022/05/11 Python