JavaScript JavaScript颜色选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript JavaScript颜色选择器相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Picker</title>
<script type="text/javascript">
<!--
var mouseDown = 0;
function get(elmnt) {
return document.getElementById(elmnt);
}
function addPicker(id, red, green, blue, width) {
if(id=='picker') {
get('selectedColor').style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
}
for(i=0;i<=width;i++) {
line = document.createElement('div');
if(i>20&&i<200) {
red--;
green--;
blue--;
}
if(id!='picker') {
line.className = 'colorPicker';
line.id = 'clr'+red+'_'+green+'_'+blue;
}
line.style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
line.onmousedown = function() {
mouseDown = 1;
return false;
};
line.onmouseup = function() {
mouseDown = 0;
return false;
};
line.onmousemove = function() {
if(mouseDown==1) {
if(this.className=='colorPicker') {
color = this.id.substring(3).split('_');
get('selectedColor').style.backgroundColor = this.style.backgroundColor;
get('selectedColor').innerHTML = this.style.backgroundColor;
redrawPicker(color[0], color[1], color[2]);
}
else {
get('selectedColor').style.backgroundColor = this.style.backgroundColor;
get('selectedColor').innerHTML = this.style.backgroundColor;
}
}
return false;
};
get(id).appendChild(line);
}
}
function redrawPicker(red, green, blue) {
for(i=0;i<get('picker').childNodes.length;i++) {
red--;
green--;
blue--;
get('picker').childNodes[i].style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
}
}
function initialize() {
addPicker('picker', 244, 151, 11, 250);
addPicker('picker1', 255, 0, 0, 100);
addPicker('picker2', 255, 255, 0, 100);
addPicker('picker3', 255, 128, 255, 100);
addPicker('picker4', 128, 0, 128, 100);
addPicker('picker5', 0, 128, 0, 100);
addPicker('picker6', 128, 54, 0, 100);
addPicker('picker7', 0, 0, 255, 100);
addPicker('picker8', 255, 128, 0, 100);
}
-->
</script>
<style type="text/css">
<!--
div#selectedColor {
width: 91px;
height: 79px;
margin-bottom: 3px;
padding: 5px;
text-align: center;
}
div#picker div {
width: 130px;
height: 1px;
cursor: crosshair;
}
div#pickers {
margin-left: 3px;
}
div#pickers div {
clear: left;
cursor: crosshair;
}
div#pickers div div {
width: 1px;
height: 20px;
float: left;
clear: none;
}
div#shadePicker, div#pickers {
float: left;
}
p {
clear: left;
padding-top: 1em;
}
-->
</style>
</head>
<body onload="initialize();">
<div>
<h1>Color Picker</h1>
<div id="shadePicker">
<div id="picker"></div>
</div>
<div id="pickers">
<div id="selectedColor"></div>
<div id="picker1"></div>
<div id="picker2"></div>
<div id="picker3"></div>
<div id="picker4"></div>
<div id="picker5"></div>
<div id="picker6"></div>
<div id="picker7"></div>
<div id="picker8"></div>
</div>
<p>Public Domain.</p>
</div>
</body>
</html>以上是关于JavaScript JavaScript颜色选择器的主要内容，如果未能解决你的问题，请参考以下文章
使用不带 type=color 的 javascript 打开浏览器标准颜色选择器
在 Javascript/JQuery 中选择单选选项时，是不是可以动态更改下拉列表的颜色或更改列表项的颜色？
更改 HTML 从 JavaScript 中选择标签字体颜色