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 相关文章推荐
javascript取消文本选定的实现代码
Nov 14 Javascript
validator验证控件使用代码
Nov 23 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python3抓取中文网页的方法
2015/07/28 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python组合无重复三位数的实例
2018/11/13 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
运动会入场解说词300字
2014/01/25 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
停水通知
2015/04/16 职场文书
开会通知短信大全
2015/04/20 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL