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 相关文章推荐
window.location不跳转的问题解决方法
Apr 17 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
PHP自定义大小验证码的方法详解
2013/06/07 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python 实用工具状态机transitions
2020/11/21 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
UNIX命令速查表
2012/03/10 面试题
大学生简单自荐信
2013/11/10 职场文书
新学期开学演讲稿
2014/05/24 职场文书
小学见习报告
2015/06/23 职场文书
运动会宣传语
2015/07/13 职场文书
退休欢送会致辞
2015/07/31 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js