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 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
React.js绑定this的5种方法(小结)
Jun 05 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
JavaScript实现移动端拖动元素
Nov 24 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的宝库目录--PEAR
2006/10/09 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
网上抓的一个特效
2007/05/11 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
十个Python程序员易犯的错误
2015/12/15 Python
python文件的md5加密方法
2016/04/06 Python
python模块smtplib学习
2018/05/22 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
设计模式的基本要素是什么
2014/04/21 面试题
企业安全生产月活动总结
2014/07/05 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2014年会计主管工作总结
2014/12/20 职场文书