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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
JS原型与继承操作示例
May 09 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python中endswith()函数的基本使用
2015/04/07 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
食品安全责任书
2014/04/15 职场文书
计算机求职信
2014/07/02 职场文书
群教班子对照检查材料
2014/08/26 职场文书
党支部先进事迹材料
2014/12/24 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
房屋产权证明书
2015/06/19 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书