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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
vue递归实现树形组件
Jul 15 Vue.js
使用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
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
php语法检查的方法总结
2019/01/21 PHP
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
Javascript的闭包详解
2014/12/26 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python程序 创建多线程过程详解
2019/09/23 Python
django 多数据库及分库实现方式
2020/04/01 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
机电专业大学生求职信
2013/10/04 职场文书
公司营业员的自我评价
2014/03/04 职场文书
警示教育活动总结
2014/05/05 职场文书
2015政治思想表现评语
2015/03/25 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
九九重阳节致辞
2015/07/31 职场文书
mysql sql常用语句大全
2022/06/21 MySQL