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";
}
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 >
< 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 >
有什么地方需要修改或你有更好的实行方法 请大评论