CSS+javascript制作颜色对话框

color.js  颜色对话框的实行   根据实际情况更改setcolor函数

//  JavaScript Document
function  getcolor()
... {
var s="";
s+=("<div class='color'>");
s+=("<div style='height:40px;'>");
s+=("<table><tr><td><div id='ccc' style='width:100px;height;40px;background-color:#000000;'></div>");
s+=("</td><td><input type='text' id='cc' size='10' value='#000000'/></td></tr></table>");
s+=("</div>");
s+=("<div class='bcolor'><table cellspacing='0' cellpadding='0'><tr>");
    for(var r=0;r<=15;r+=3)
    ...{    
        if(r==9)
            s+=("</tr><tr>");
        s+=("<td>");
        
        s+=("<table  cellspacing='0' cellpadding='0'>");
        for(var b=0;b<=15;b+=3)
        ...{
            s+=("<tr>");
            for(var g=0;g<=15;g+=3)
            ...{
        //        if(b==9) s+=("</tr><tr>");
                var rr=r.toString(16);
                rr+=rr;
                var bb=b.toString(16);
                bb+=bb;
                var gg=g.toString(16);
                gg+=gg;
                s+="<td class='ctd' οnmοusemοve='movecolor("#"+rr+gg+bb+"")'";
                s+="οnclick='setcolor("#"+rr+gg+bb+"")' style='border:1px solid #000;";
                 s+="background-color:#"+rr+gg+bb+";'>";
                s+="</td>";
                
            }
            s+=("</tr>");
        }
        s+=("</table>");
        s+=("</td>");
        
        
    }
    s+=('</tr></table></div></div>');
    return s;
    }
     function  getobj(id)
     ... {
        return document.getElementById(id);
    }
     function  movecolor(color)//鼠标移过某种颜色的操作
     ... {
        getobj("ccc").style.backgroundColor=color;
        getobj("cc").value=color;
    
    }
     function  setcolor(color)  //鼠标单击某种颜色后的操作
     ... {
            getobj("colordiv").style.backgroundColor=color;
            getobj("cccc").style.display="none";
    }

 

test.html   测试

< html >
< head >
< script  type ="text/javascript"  src ="color.js" >
</ script >
< style  type ="text/css" >
.color { border : 1px solid #9999FF ;  width : 300px ; }
 .bcolor { background-color : #e5e5ef ; border : 1px solid #eba8ff ; cursor : hand ; }
  .ctd { margin : 0 ; padding : 0 ; height : 15px ; width : 15px ; }

</ style >
< script  type ="text/javascript" >
function  c_click(){
     var  e = window.event;
    getobj( " cccc " ).innerHTML = getcolor();
    getobj( " cccc " ).style.left = e.x + " px " ;
    getobj( " cccc " ).style.top = e.y + " px " ;
    getobj( " cccc " ).style.display = "" ;
}
        
</ script >
</ head >
< button  onclick ="c_click()" > color </ button >
< div  id ="cccc"  style ="display:none; border-width:0; position:absolute; z-index:1000; width:200px; height:180px; " ></ div >
< div  style ="width:80px;height:30px;backgroundColor=#000"  id ="colordiv" ></ div >

</ body >
</ html >

有什么地方需要修改或你有更好的实行方法 请大评论