帅哥提问,一扔就200分.要个JS操作颜色的函数.

随手写了一个.
<body><SCRIPT LANGUAGE="JavaScript">
<!--
var c = "#F98F7F";
function getColor(key, color, num)
{
  if(!/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.test(color))
  {alert("你传递的颜色不符合规则: #RRGGBB"); return color;}
  var r = parseInt("0x"+ RegExp.$1, 16);
  var g = parseInt("0x"+ RegExp.$2, 16);
  var b = parseInt("0x"+ RegExp.$3, 16);
  switch(key)
  {
    case "red" :
      r += parseInt(num, 10);
      break;
    case "green" :
      g += parseInt(num, 10);
      break;
    case "blue" :
      b += parseInt(num, 10);
      break;
    case "light" :
      r += parseInt(num, 10);
      g += parseInt(num, 10);
      b += parseInt(num, 10);
      break;
    case "dark" :
      r -= parseInt(num, 10);
      g -= parseInt(num, 10);
      b -= parseInt(num, 10);
      break;
  }
  if(r>255) r=255; if(r<0) r=0;
  if(g>255) g=255; if(g<0) g=0;
  if(b>255) b=255; if(b<0) b=0;
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);
  r = ("00"+r).substr(r.length);
  g = ("00"+g).substr(g.length);
  b = ("00"+b).substr(b.length);
  return "#"+ r + g + b;
}
document.body.style.backgroundColor=c
c = getColor("dark", c, 50);
//-->
</SCRIPT>
<input type=button value=改变后的颜色
  onclick="document.body.style.backgroundColor=c">

解决方案 »

  1.   

    ADDITIVE COLOR
    Synonym for the RGB (red, green, blue) color space that uses the projected red, green and blue light as primary colors to produce the full spectrum of colors. Any color can be produced by adding the colors of the three color channels RGB (Red, Green, and Blue). If the colors of two of the color channels are mixed in equal proportions, new base colors are created. Blue and green add up to a bright, light blue called cyan. Magenta, a bright pink, is made by mixing red and blue. Red and green together make yellow. If red, green, and blue light are mixed equally together at full power, you get white light.LIGHTNESS
    The 'blackness' or 'whiteness' of the color. In terms of Color Wheel Pro, black has the lightness of -1, pure hue has the lightness of 0, and white has the lightness of 1
      

  2.   

    <body><SCRIPT LANGUAGE="JavaScript">
    function getColor(key, color, num)
    {
      if(isNaN(num)){alert("传递的加值不是数字"); return;}
      if(!/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.test(color))
      {alert("你传递的颜色不符合规则: #RRGGBB"); return color;}
      var r = parseInt("0x"+ RegExp.$1, 16);
      var g = parseInt("0x"+ RegExp.$2, 16);
      var b = parseInt("0x"+ RegExp.$3, 16);
      num = parseInt(num, 10);
      switch(key)
      {
        case "red"   : r += num; break;
        case "green" : g += num; break;
        case "blue"  : b += num; break;
        case "light" : r += num; g += num; b += num; break;
        case "dark"  : r -= num; g -= num; b -= num; break;
      }
      //alert("r = "+ r +"\r\ng = "+ g +"\r\nb = "+ b)
      //操作后的数字正确性判断
      if(r>255) r=255; if(r<0) r=0;
      if(g>255) g=255; if(g<0) g=0;
      if(b>255) b=255; if(b<0) b=0;  //十进制数字转换到十六进制
      r = r.toString(16);
      g = g.toString(16);
      b = b.toString(16);  //位数不够两位的补零
      r = ("00"+r).substr(r.length);
      g = ("00"+g).substr(g.length);
      b = ("00"+b).substr(b.length);
      return "#"+ r + g + b;
    }
    document.body.style.backgroundColor="#F98F7F";
    function mm()
    {
      color.value = getColor(key.value, color.value, num.value);
      document.body.style.backgroundColor = color.value;
    }
    </SCRIPT>
    <input id=color value="#f98f7f"><br>
    <select id=key>
      <option value="red">red
      <option value="green">green
      <option value="blue">blue
      <option value="light">light
      <option value="dark">dark
    </select>要加的数值:
    <input id=num value=20><br>
    <input type=button value=meizz onclick="mm()">