20分求一个颜色叠加的函数

一个函数传入不同颜色值(>2个颜色)   返回一个叠加好的颜色这个颜色是由传入颜色组合来的。。 

解决方案 »

  1.   

    #000和#FFF会叠加成什么颜色。。不解
      

  2.   

    如何叠加？转成16进制值  再加？还是，按 r g b 各值加？
      

  3.   


    <html>
    <head>
    <title>test</title>
    <style>
    div{
    width:120px;
    height:120px;
    border:1px solid #333;
    }
    </style>
    </head><body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
    // 转换颜色值函数 - RGB 分别相加除以2
    function cColor(color1,color2){
    color1 = color1.replace('#','0x');
    color2 = color2.replace('#','0x');
    var cl1 = {},cl2 = {},getColor = 0x000000;
    cl1.R =  (color1>>16) & 0xFF;
    cl1.G =  (color1>>8) & 0xFF;
    cl1.B =  color1 & 0xFF;
    cl2.R =  (color2>>16) & 0xFF;
    cl2.G =  (color2>>8) & 0xFF;
    cl2.B =  color2 & 0xFF;
    getColor = (((cl1.R + cl2.R)/2)<<16 | ((cl1.G + cl2.G)/2)<<8 | ((cl1.B + cl2.B)/2)).toString(16);
    var cArr = ['#'];
    if(getColor.toString(16).length<6)for(var i = 0,dv = 6 - getColor.toString(16).length;i< dv;i++)cArr.push('0');
    cArr.push(getColor);
    return cArr.join('');
    }
    // 转换颜色值函数 - 两颜色相加除以2
    function cColor1(color1,color2){
    color1 = color1.replace('#','0x')|0;
    color2 = color2.replace('#','0x')|0;
    getColor = ((color1 + color2)/2).toString(16);
    var cArr = ['#'];
    if(getColor.toString(16).length<6)for(var i = 0,dv = 6 - getColor.toString(16).length;i< dv;i++)cArr.push('0');
    cArr.push(getColor);
    return (cArr.join(''));
    }
    // 测试
    var colors = ['#ff0000','#00ff00'];
    var divs = document.getElementsByTagName('div');
    divs[0].style.backgroundColor = colors[0];
    divs[1].style.backgroundColor = colors[1];
    divs[2].style.backgroundColor = cColor(colors[0],colors[1]);
    divs[3].style.backgroundColor = cColor1(colors[0],colors[1]);
    </script>
    </body>
    </html>