js动态获取颜色-CSDN博客

varname = location.search.substr(1); function getcolor(event) { var hex = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F' ]; if (event.clientX > 164 || event.clientY > 164) { return; } var hsv = new Object(); var h = 164; var y = event.clientY; hsv.h = 360 * event.clientX / 164; if (y > h / 2) { hsv.s = 1.0; hsv.v = 2 * (h - y) / h; } else { hsv.v = 1.0; hsv.s = y / (h / 2); } var rgb = hsvToRgb(hsv); var red = Math.round(255 * rgb.r); var green = Math.round(255 * rgb.g); var blue = Math.round(255 * rgb.b); hexstr = '#' + hex[(red - (red % 16)) / 16].toString() + hex[red % 16].toString() + hex[(green - (green % 16)) / 16].toString() + hex[green % 16].toString() + hex[(blue - (blue % 16)) / 16].toString() + hex[blue % 16].toString() document.getElementById('box').style.backgroundColor =hexstr; document.getElementById('colorhex').value =hexstr; } function hsvToRgb(hsv) { var rgb = new Object(); var i, f, p, q, t; if (hsv.s == 0) { rgb.r = rgb.g = rgb.b = hsv.v; return rgb; } hsv.h /= 60; i = Math.floor(hsv.h); f = hsv.h - i; p = hsv.v * (1 - hsv.s); q = hsv.v * (1 - hsv.s * f); t = hsv.v * (1 - hsv.s * (1 - f)); switch (i) { case 0: rgb.r = hsv.v; rgb.g = t; rgb.b = p; break; case 1: rgb.r = q; rgb.g = hsv.v; rgb.b = p; break; case 2: rgb.r = p; rgb.g = hsv.v; rgb.b = t; break; case 3: rgb.r = p; rgb.g = q; rgb.b = hsv.v; break; case 4: rgb.r = t; rgb.g = p; rgb.b = hsv.v; break; default: rgb.r = hsv.v; rgb.g = p; rgb.b = q; break; } return rgb; } function setvalue(obj) { parent.$(varname + '_v').value = obj.value + cvalueimg; var sobj = parent.$(varname).style.background; var sp = sobj.indexOf(' '); var setstyle = ''; if (sp == -1) { if (sobj.substr(0, 1) == '#') { setstyle = obj.value; } } else { if (sobj.substr(0, 1) == '#') { setstyle = obj.value + ' ' + sobj.substr(sp + 1); } else if (sobj.substr(sp + 1, 1) == '#') { setstyle = obj.value + ' ' + sobj.substr(0, sp); } } setstyle = setstyle != '' ? setstyle : obj.value; parent.$(varname).style.background = setstyle; document.getElementById('box').style.background = setstyle; }
<script src="js/getcolor.js"> </script> <body οnmοusedοwn="getcolor(event);" scrolling="no"> <img src="img/color.jpg" style="cursor: crosshair; width: 164px; height: 164px"> <div id="box"></div> <input id="colorhex" style="padding: 2px; font: 12px Arial, Tahoma; cursor: pointer; width: 100%; border: 0px" οnkeyup="setvalue(this)" οnclick="setvalue(this)"> </body>