求一代码(颜色选择)

这里有个颜色选取器，不过不是你那样子的，也给你贴出来吧http://www.softcomplex.com/products/tigra_color_picker/demo1.html

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html xmlns:rs><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>调色板</title>
<style>
body{
    padding:0px;margin:0px;background-color:#F5F5F3;overflow:hidden;
}
body,table,input,textarea,select,button,label,form,legend,fieldSet{
font-family:宋体;font-size:12px;color:#000000;word-break:break-all;text-overflow:ellipsis;cursor:default;
}
input{font-size:9px;color:#505050;background-color:#FFFFFF;border:1px solid #878787;padding:0px 2px;}
@media all{
rs\:btn{
    back-color:#ADABAA;behavior:url(../htc/xsickbtn.htc);cursor:default;background-color:#ADABAA;color:#FFFDFE;
    height:17px;padding:3px 8px 0px 8px;white-space:nowrap;width:100px;
}
}
.cssOuterSlideContainer{width:150px;height:6px;}
.cssGradContainer{position:absolute;z-index:9;width:140px;height:6px;border:1 solid #303030;font-size:1px;cssLine-height:1px;overflow:hidden;margin-left:5px;}
.cssLineContainer{position:absolute;z-index:0;width:139px;height:6px;margin-left:5px;}
.cssLine{width:139px;height:6px;overflow:hidden;filter:alpha(style=1);}
.sliderHandle{position: relative;width:11px;height:14px;z-index:6;cursor: default;}
#idToolbar{position:absolute;z-index:7;left:112px;top:150px;height:20px;width:388px;}
#idColorInput{width:110px;background-color:#FEFEFE;border:1px solid #DADBD6;height:17px;white-space:nowrap;font-size:10px;font-family:Helvetica,Small Fonts;}
#idColorsDiv{position:absolute;z-index:6;left:244px;top:25px;height:99px;width:227px;font-size:1px;line-height:2px;}
#idColorsDiv span{width:15px;height:9px;border:1px solid #303030;margin:0px 1px 1px 0px;}
#idColorImage{width:164px;height:20px;border: 1px solid #303030;margin:9px 0px 0px 1px;}
#idColorBox{width:20px;height:22px;border: 1px solid #303030;margin:9px 0px 0px 4px;}
#idColorTable{position:absolute;z-index:6;left:20px;top:20px;width:204px;height:99px;}
#idColorTable input{width:22px;font-family:tahoma;margin-left:2px;text-align:right;}
</style><script>var dragobject = null;
var type;
var onchange = "";
var tx;
var ty;
function getReal(el,type,value){
    temp = el;
while ((temp!=null) && (temp.tagName!="BODY")){
        if (eval("temp."+type)==value){
            el=temp;
            return el;
}
temp=temp.parentElement;
}
return el;
}function moveme_onmousedown(){
var tmp=getReal(window.event.srcElement,"className","sliderHandle");
    if(tmp.className=="sliderHandle"){
        dragobject=tmp;
        onchange=dragobject.getAttribute("onchange");
        if (onchange==null) onchange="";
        type=dragobject.getAttribute("type");
        if (type=="y") ty=(window.event.clientY-dragobject.style.pixelTop);
        else tx=(window.event.clientX-dragobject.style.pixelLeft);
}
else {
dragobject=null;
}
}function moveme_onmouseup(){
    if(dragobject) dragobject=null;
}function moveme_onmousemove(){
    if (dragobject){
        if (type=="y"){
            if(event.clientY >=0){
                if ((event.clientY-ty>=0) && (event.clientY-ty<=dragobject.parentElement.offsetHeight-dragobject.offsetHeight)) dragobject.style.top=event.clientY-ty;
                if (event.clientY-ty<0) dragobject.style.top = "0";
                if (event.clientY-ty>dragobject.parentElement.offsetHeight-dragobject.offsetHeight-0) dragobject.style.top=dragobject.parentElement.offsetHeight-dragobject.offsetHeight;
                dragobject.value=dragobject.style.pixelTop/(dragobject.parentElement.offsetHeight-dragobject.offsetHeight);
                eval(onchange.replace(/this/g,"dragobject"));
}
}
else {
if (event.clientX>=0){
                if ((event.clientX-tx>=0) && (event.clientX-tx<=dragobject.parentElement.offsetWidth-dragobject.offsetWidth)) dragobject.style.left=event.clientX-tx;
                if (event.clientX-tx<0) dragobject.style.left="0";
                if (event.clientX-tx>dragobject.parentElement.clientWidth-dragobject.offsetWidth-0) dragobject.style.left=dragobject.parentElement.clientWidth-dragobject.offsetWidth;
                dragobject.value=dragobject.style.pixelLeft/(dragobject.parentElement.clientWidth-dragobject.offsetWidth);
                eval(onchange.replace(/this/g,"dragobject"));
}
}
}
}function setValue(el,val){1
    el.value=val;
if (el.getAttribute("TYPE")=="x") el.style.left=val*(el.parentElement.clientWidth-el.offsetWidth);
    else el.style.top=val*(el.parentElement.clientHeight-el.offsetHeight);
    eval(el.onchange.replace(/this/g,"el"));
}with (window.document) {
oncontextmenu=onselectstart=ondragstart=function(){
var sName=event.srcElement.tagName.toLowerCase();return (sName=="textarea" || sName=="input" || sName=="select");
}
onmousedown=moveme_onmousedown;
onmouseup=moveme_onmouseup;
onmousemove=moveme_onmousemove;
}function trim(_s1,_s2){
    var s=_s1;
    if (_s2!="left") s=s.replace(/\s*$/,"");
    if (_s2!="right") s=s.replace(/^\s*/,"");
    return s;
}function isHex(_s){
    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(_s);
}function isRgb(_s){
    return /^rgb$(\d+,\d+,\d+|\d+%,\d+%,\d+%)$$/i.test(_s);
}function parseRgb(_s){
    var col;
    if (isRgb(_s)){
        var s=_s.slice(4,_s.length-1);
        col=s.split(",");
        for (var i=0;i<3;i++){
            var n=col[i];
            if (n.charAt(n.length-1)=="%"){
                n=parseInt(n.replace("%",""),10);
                n=Math.round(n*255/100);
            }
            else n=parseInt(n);
            col[i]=n;
        }
    }
    else if (isHex(_s)){
        var s=_s.slice(1);
        if (s.length==3) s=s.charAt(0)+s.charAt(0)+s.charAt(1)+s.charAt(1)+s.charAt(2)+s.charAt(2);
        col=new Array(3);
        var m=0;
        for (var i=0;i<3;i++){
            col[i]=parseInt(s.substring(m,m+2),16);
            m=m+2;
        }
    }
    return col;
}
<接上>function hsvToRgb(_o){
    var col=new Array(3);
var i,f,p,q,t;
    if (_o.s==0){
        col[0]=col[1]=col[2]=_o.v;
        return col;
}
_o.h/=60;
    i=Math.floor(_o.h);
    f=_o.h-i;
    p=_o.v*(1-_o.s);
    q=_o.v*(1-_o.s*f);
    t=_o.v*(1-_o.s*(1-f));
    switch (i){
        case 0 : col[0]=_o.v;col[1]=t;col[2]=p;break;
        case 1 : col[0]=q;col[1]=_o.v;col[2]=p;break;
        case 2 : col[0]=p;col[1]=_o.v;col[2]=t;break;
case 3 : col[0]=p;col[1]=q;col[2]=_o.v;break;
case 4 : col[0]=t;col[1]=p;col[2]=_o.v;break;
        default: col[0]=_o.v;col[1]=p;col[2]=q;break;
}
    for (var i=0;i<3;i++) col[i]=Math.round(255*col[i]);
return col;
}var colColors=new Array(
    "240,248,255","250,235,215","0,255,255","127,255,212","240,255,255","245,245,220","255,228,196","0,0,0",
    "255,235,205","0,0,255","138,43,226","165,42,42","222,184,135","95,158,160","127,255,0","210,105,30",
    "255,127,80","100,149,237","255,248,220","220,20,60","0,255,255","0,0,139","0,139,139","184,134,11",
    "169,169,169","0,100,0","189,183,107","139,0,139","85,107,47","255,140,0","153,50,204","139,0,0",
    "233,150,122","143,188,143","72,61,139","47,79,79","0,206,209","148,0,211","255,20,147","0,191,255",
    "105,105,105","30,144,255","178,34,34","255,250,240","34,139,34","255,0,255","220,220,220","248,248,255",
    "255,215,0","218,165,32","128,128,128","0,128,0","173,255,47","240,255,240","255,105,180","205,92,92",
    "75,0,130","255,255,240","240,230,140","230,230,250","255,240,245","124,252,0","255,250,205","173,216,230",
    "240,128,128","224,255,255","250,250,210","144,238,144","211,211,211","255,182,193","255,160,122","32,178,170",
    "135,206,250","119,136,153","176,196,222","255,255,224","0,255,0","50,205,50","250,240,230","255,0,255",
    "128,0,0","102,205,170","0,0,205","186,85,211","147,112,219","60,179,113","123,104,238","0,250,154",
    "72,209,204","199,21,133","25,25,112","245,255,250","255,228,225","255,228,181","255,222,173","0,0,128",
    "253,245,230","128,128,0","107,142,35","255,165,0","255,69,0","218,112,214","238,232,170","152,251,152",
    "175,238,238","219,112,147","255,239,213","255,218,185","205,133,63","255,192,203","221,160,221","176,224,230",
    "128,0,128","255,0,0","188,143,143","65,105,225","139,69,19","250,128,114","244,164,96","46,139,87",
    "255,245,238","160,82,45","192,192,192","135,206,235","106,90,205","112,128,144","255,250,250","0,255,127",
    "70,130,180","210,180,140","0,128,128","216,191,216","255,99,71","64,224,208","238,130,238","245,222,179",
    "255,255,255","245,245,245","255,255,0","154,205,50"
);function update(el){
    var sR=Math.round(255*idRSlider.value);
    var sG=Math.round(255*idGSlider.value);
    var sB=Math.round(255*idBSlider.value);
    window.colorChange([sR,sG,sB],el);
}function window.colorChange(_col,_o){
    if (_col.constructor==String) _col=parseRgb(_col);
    if (_col==null || _col.length!=3) return;
    var sPreFix1="rgb(",sPreFix2=")";
    var sR=_col[0],sG=_col[1],sB=_col[2];
    if (_o.className!="sliderHandle"){
        setValue(idRSlider,Math.min(256,sR)/256);
        setValue(idGSlider,Math.min(256,sG)/256);
        setValue(idBSlider,Math.min(256,sB)/256);
    }
idRLeft.style.backgroundColor=sPreFix1+0+","+sG+","+sB+sPreFix2;
idRRight.style.backgroundColor=sPreFix1+255+","+sG+","+sB+sPreFix2;
idGLeft.style.backgroundColor=sPreFix1+sR+","+0+","+sB+sPreFix2;
idGRight.style.backgroundColor=sPreFix1+sR+","+255+","+sB+sPreFix2;
idBLeft.style.backgroundColor=sPreFix1+sR+","+sG+","+0+sPreFix2;
idBRight.style.backgroundColor=sPreFix1+sR+","+sG+","+255+sPreFix2;
    idRInput.value=sR;
    idGInput.value=sG;
    idBInput.value=sB;
    window.color=idColorInput.value=idColorBox.style.backgroundColor=sPreFix1+_col.join(",")+sPreFix2;
}
function CP(){
with (idColorInput){focus();select();}
with (window.document){execCommand('Copy');execCommand('UnSelect');}
}</script><script src="slidebar.js"></script><script for=window event=onload>for (var i=0;i<140;i++){
var oCol=window.document.createElement("span");
idColorsDiv.appendChild(oCol);
var sColor="rgb("+colColors[i]+")";
oCol.color=sColor;
with (oCol){
style.backgroundColor=sColor;
onmouseover=function(){this.style.borderColor="#FFFFFF";}
onmouseout=function(){this.style.borderColor="#303030";}
onclick=function(){window.colorChange(this.style.backgroundColor,this);}
}
}idColorImage.onmousedown=function(){
if (window.event.button==1 && dragobject==null){
var hsv=new Object();
var h=this.offsetHeight;
var y=window.event.offsetY;
        hsv.h=360*window.event.offsetX/this.offsetWidth;
if (y>h/2){hsv.s=1.0;hsv.v=2*(h-y)/h;}
else {hsv.v=1.0;hsv.s=y/(h/2);}
window.colorChange(hsvToRgb(hsv),this);
}
}idRInput.onblur=idGInput.onblur=idBInput.onblur=function(){
var correct=function(_i){return Math.max(Math.min(_i,255),0);}
this.value=trim(this.value);
var iR=parseInt(idRInput.value);if (isNaN(iR)) return;
var iG=parseInt(idGInput.value);if (isNaN(iG)) return;
var iB=parseInt(idBInput.value);if (isNaN(iB)) return;
window.colorChange([correct(iR),correct(iG),correct(iB)],this);
}idColorInput.onblur=function(){
this.value=trim(this.value);
var sColor=this.value;
var bE=(isHex(sColor) || isRgb(sColor));
if (!bE) this.focus();
else window.colorChange(sColor,this);
}window.colorChange("#FF3300",idColorImage);</script></head><body><table border=0 cellpadding=0 cellspacing=0 cols=2 id=idToolBar><tr>
<td width=126><input type=text id=idColorInput /></td>
<td><rs:btn action="CP()">复制到剪贴板</rs:btn><rs:btn style="margin-left:6px;" action="window.close()">关闭</rs:btn></td>
</tr></table>
<div id=idColorsDiv></div><table border=0 cellpadding=4 cellspacing=0 id=idColorTable cols=3 rows=3>
<col width=14 align=left valign=top /><col width=160 /><col valign=top />
<tr><td><b>R</b></td>
<td><span class=cssOuterSlideContainer>
<div class=cssGradContainer></div>
<div class=cssLineContainer id=idRRight style="background:rgb(255,0,0);">
<div class=cssLine id="idRLeft" style="background:rgb(0,0,0);"></div>
</div>
      <div id=idRSlider class=sliderHandle type=x value=0 onchange="update(this)"><img src="images/arrow0.gif" width=11 height=14 /></div>
      </span></td>
<td><input type=text id=idRInput /></td></tr>
<tr><td><b>G</b></td>
<td><span class=cssOuterSlideContainer>
<div class=cssGradContainer></div>
<div class=cssLineContainer id=idGRight style="background:rgb(0,255,0);">
<div class=cssLine id=idGLeft style="background:rgb(0,0,0);"></div>
</div>
      <div id=idGSlider class=sliderHandle type=x value=0 onchange="update(this)"><img src="images/arrow0.gif" width=11 height=14 /></div>
      </span></td>
<td><input type=text id=idGInput /></td></tr>
<tr><td><b>B</b></td>
<td><span class=cssOuterSlideContainer>
<div class=cssGradContainer></div>
<div class=cssLineContainer id=idBRight style="background:rgb(0,0,255);">
<div class=cssLine id=idBLeft style="background:rgb(0,0,0);"></div>
</div>
      <div id=idBSlider class=sliderHandle type=x value=0 onchange="update(this)"><img src="images/arrow0.gif" width=11 height=14 /></div>
      </span></td>
<td><input type=text id=idBInput /></td></tr>
<tr><td colspan=2><img src="images/colorpicker.jpg" width="256" height="512" id=idColorImage /></td><td><span id=idColorBox> </span></td></tr>
</table>
</body></html>
看看这个行不<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
<title>选择色彩值</title>
<style>td,a,p,input,select{font-size:9pt};
td.s{cursor:hand}
</style>
<script>var c=new Array("00","20","40","60","80","A0","C0","FF");
var b=new Array("00","80","C0","FF");
function ColorTable()
{ var n,color,i,j,k;
document.write("<table border=1 width=280>");
n=1;
for(i=3;i>=0;i--)
for(j=7;j>=0;j--)
for(k=7;k>=0;k--,n++)
{ color="#" +b[i]+c[j]+c[k];
if( (n-1) % 16==0) document.write("<tr height=16>");
document.write("<td bgcolor='" +color+"' class=s width=16 onclick='ClickSelColor(\"" +color+ "\");'></td>");
if(n%16==0) document.write("</tr>");
}
document.write("</table>");
}function ClickColor(c)
{
CurColor.style.backgroundColor=c;
CurColorName.innerText=c;
}
function ClickSelColor(c)
{
CurSelColor.style.backgroundColor=c;
CurSelColorName.innerText=c;
}function ClickCancel()
{ window.returnValue="";
window.close();
}function ClickOk()
{
window.returnValue=CurSelColorName.innerText;
window.close();
}
function Init()
{
if (window.dialogArguments)
{ ClickColor(window.dialogArguments);
ClickSelColor(window.dialogArguments);
}
else
{ ClickColor("#F0F0F0");
ClickSelColor("#F0F0F0");
}
}
</script>
</head>
<body bgcolor="#d0d0c8" onload="Init();" topmargin=10 leftmargin=10>
<table border="0" align=right height="192" cellspacing="0" cellpadding="0" width=390>
<tr>
<td rowspan="2" height="186" width=290 valign="top">
<script>
ColorTable();
</script>
</td>
<td width="4" rowspan="2" height="186" valign="top" background="Images/Separator.gif">　</td>
<td width="100" valign="top" align=center height="50">
<table border="0" >
<tr>
<td>
<input type="button" value="确定" name="bntOK" style="width: 80; height: 21" onclick="ClickOk();"></td>
</tr>
<tr>
<td>
<input type="button" value="取消" name="bntCancel" style="width: 80; height: 21" onclick="ClickCancel();"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100" align="center" valign="bottom">
选中色彩
<table border="1" width="80" cellspacing height="70">
<tr>
<td width="100%" ID="CurSelColor">　</td>
</tr>
</table>
<div ID="CurSelColorName">#C0C0D8</div>
<br>当前色彩
<table border="1" width="80" cellspacing height="70">
<tr>
<td width="100%" ID="CurColor">　</td>
</tr>
</table>
<div ID="CurColorName">#C0C0D8</div></td>
</tr>
</table>
</body>
</html>
都写得很好,但不是我需要的,我不能结帖,
我就是不知道那个颜色选择框的算法而已,
给出算法也可以得分了..上面的不合格..sorry
<HTML>
<HEAD>
<TITLE>颜色</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE TYPE="text/css">
td {font-size: 10.8pt}
body {font-size: 10.8pt}
BUTTON {width:5em}
</STYLE><SCRIPT LANGUAGE=JavaScript>
var SelRGB = '';
var DrRGB = '';
var SelGRAY = '120';var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');function ToHex(n)
{ var h, l; n = Math.round(n);
l = n % 16;
h = Math.floor((n / 16)) % 16;
return (hexch[h] + hexch[l]);
}function DoColor(c, l)
{ var r, g, b;  r = '0x' + c.substring(1, 3);
  g = '0x' + c.substring(3, 5);
  b = '0x' + c.substring(5, 7);

  if(l > 120)
  {
    l = l - 120;    r = (r * (120 - l) + 255 * l) / 120;
    g = (g * (120 - l) + 255 * l) / 120;
    b = (b * (120 - l) + 255 * l) / 120;
  }else
  {
    r = (r * l) / 120;
    g = (g * l) / 120;
    b = (b * l) / 120;
  }  return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}function EndColor()
{ var i;  if(DrRGB != SelRGB)
  {
    DrRGB = SelRGB;
    for(i = 0; i <= 30; i ++)
      GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
  }  SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
  ShowColor.bgColor = SelColor.value;
}
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onclick>
  SelRGB = event.srcElement.bgColor;
  EndColor();
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseover>
  RGB.innerText = event.srcElement.bgColor;
  EndColor();
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseout>
  RGB.innerText = SelRGB;
  EndColor();
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onclick>
  SelGRAY = event.srcElement.title;
  EndColor();
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseover>
  GRAY.innerText = event.srcElement.title;
  EndColor();
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseout>
  GRAY.innerText = SelGRAY;
  EndColor();
</SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=Ok EVENT=onclick>
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT></HEAD><BODY bgcolor=menu><div align="center"><center><table border="0" cellspacing="10" cellpadding="0"><tr><td>
<TABLE ID=ColorTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:hand'>
<SCRIPT LANGUAGE=JavaScript>
function wc(r, g, b, n)
{
r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15; document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
}var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);  for(i = 0; i < 16; i ++)
  {
     document.write('<TR>');
     for(j = 0; j < 30; j ++)
     {
      n1 = j % 5;
      n2 = Math.floor(j / 5) * 3;
      n3 = n2 + 3;      wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
      (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
      (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
     }     document.writeln('</TR>');
  }
</SCRIPT>
</TABLE></td><td>
<TABLE ID=GrayTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:hand'>
<SCRIPT LANGUAGE=JavaScript>
  for(i = 255; i >= 0; i -= 8.5)
     document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');
</SCRIPT>
</TABLE></td></tr></table></center></div><div align="center"><center><table border="0" cellspacing="10" cellpadding="0">
<tr><td rowspan="2" align="center">
选中色彩<table ID=ShowColor border="1" width="40" height="30" cellspacing="0" cellpadding="0">
<tr><td></td></tr></table></td>
<td rowspan="2">基色: <SPAN ID=RGB></SPAN><BR>
亮度: <SPAN ID=GRAY>120</SPAN><BR>
代码: <INPUT TYPE=TEXT SIZE=7 ID=SelColor></td>
<td><BUTTON ID=Ok TYPE=SUBMIT>确定</BUTTON></td></tr>
<tr><td><BUTTON ONCLICK="window.close();">取消</BUTTON></td></tr></table></center></div></BODY>
</HTML>
这里有http://www.51windows.net/myjs/?u=/hw/asp/jsview.asp?id=169