<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

                 <meta name="author" content="郭菊锋702004176@qq.com"/>

         <style type="text/css">

         div{

             width: 100px;

             height: 100px;

         }

         </style>

         <script type="text/javascript">

         window.onload = function(){

             var oDiv1 = document.getElementById("div1");

             var oDiv2 = document.getElementById("div2");

             var a = Math.floor(Math.random()*225);

             var b = "rgb("+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+")";

             var c = "rgb("+a+","+a+","+a+")";

             oDiv1.style.backgroundColor = b;

             oDiv2.style.backgroundColor = c;

             console.log(a);

             console.log(b+"rgb要想不一样，要三个公式分开分别穿进去，不能合起来。");

             console.log(c+"用a替换公式的时候，传出来的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;

 //          }

 //        oDiv.style.backgroundColor =getRandomColor();

         }

         </script>

     </head>

     <body>

         <div id="div1"></div>

         <div id="div2"></div>

     </body>

 </html>

以上，是第一种，用rgb（r,g,b）的方式传来的，

　　精髓是，r=0-255之间任意值。gb同理。利用Math.random()*255取得0-254之间的无限近似小数，再利用Math的floor取整，或者用parseInt取整，得到整数0-255。然后穿进去代替rgb的响应位置即可。

　　这里说：Math.random()*255，怎么得出0-224的近似小数：Math.random()本身得出的是0-1之间的任意小数值，包括0不包括1。

　　也就是说：Math.random（）取出来的最小值是:0，最大值是0.9999999999999999999999999999，反正不会等于 1，就无限向后走，接下来，当取到0或者0.000000000000000000123等这些数时，再乘以255，结果还是0或者0.0000000多，经过我们一取整，得到的便是0了。而最大值乘以255时，得到的是254.12493....(无限)，这样Math.floor()向上取整得到255.

以下，是常用的，#xxxxxx颜色值得设置方法：

#xxxxxx精髓：0123456789abdefx这几个值中，随意匹配6个即可。

JS-随机div颜色的更多相关文章

  1. js随机背景颜色

    // 要求: 随机生成颜色RGB 核心点 :(0,0,0) rgb 每一组的数字取值范围是 0~255 // 需要随机生成 0~255 之间的整数 function getRandom(min, ma ...

  2. js随机模块颜色

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  3. js控制div颜色

    <html><head></head><style>#div1{width:400px;height:400px;background-color:re ...

  4. JS随机产生颜色

    <script> function selectForm(lowerValue,upperValue){ var choices=upperValue-lowerValue+1; retu ...

  5. js随机生成颜色代码

    function generyRandomColor() { return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toStri ...

  6. js随机生成颜色的方法

    function getRandomColor() { return '#' + (Math.random() * 0xffffff << 0).toString(16); }

  7. js 随机生成颜色

    方法一  function randomColor (){ var str='#'; for(var i=0;i<6;i++){ str+=Math.floor(Math.random()*16 ...

  8. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  9. 点击DIV随机换颜色

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  10. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

随机推荐

  1. uart 超声波传感器数据读取

    传感器选择 淘宝上搜索 US-100 , 价格大概在17块人民币左右. 读取数据的代码如下: // include/aplex_tty.h #ifndef _APLEX_TTY_H__ #define ...

  2. kubernetes 阿里云安装（kubeadm方式）

    注意:不能修改hostnamecurl -sSL http://aliacs-k8s.oss-cn-hangzhou.aliyuncs.com/installer/kubemgr-1.6.1.sh & ...

  3. MapReduce的Shuffle过程介绍

    MapReduce的Shuffle过程介绍 Shuffle的本义是洗牌.混洗,把一组有一定规则的数据尽量转换成一组无规则的数据,越随机越好.MapReduce中的Shuffle更像是洗牌的逆过程,把一 ...

  4. CMake 使用方法

    CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的 ...

  5. poj3208 Apocalypse Someday 数位dp+二分 求第K(K <= 5*107)个有连续3个6的数。

    /** 题目:poj3208 Apocalypse Someday 链接:http://poj.org/problem?id=3208 题意:求第K(K <= 5*107)个有连续3个6的数. ...

  6. iOS开发小技巧--富文本字典集合中的Key都是OC中的常量字符串

  7. skynet1.0阅读笔记_skynet的启动

    首先看skynet的启动,函数入口在 skynet_main.c 的main(),其中最重要的是: skynet_start(&config); 在skynet_start中做了两个启动: / ...

  8. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  9. socket和http

    套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议 ...

  10. 关于用Spine制作骨骼动画的步骤

    步骤: 1.打开spine. 2.新建一个空项目. 3.点右边Tree下的Images模块,导入在自己的切片素材和原整图. 4.把原整图拖到场景中,点右下角Color改变原图的颜色,方便后面对照. 5 ...