本文详细解析了一个基于JavaScript的动态颜色选择器实现过程，包括颜色的获取、处理和显示，涉及事件监听、颜色空间转换及用户交互设计。
<script type="text/javascript" src="color.js"></script>
<body onmousemove ="getcolor(event);" scrolling="no" >
<table cellspacing="0" cellpadding="0">
<tr height="20">
<td width="100" id="box" >
</td>
<td width="200">
<input id="colorhex"
style="padding: 2px; font: 12px Arial, Tahoma; cursor: pointer; width: 100%; border: 0px"
>
</td>
</tr>
</table>
</body>
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) { achromatic (grey) 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; }
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) { achromatic (grey) 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; }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
