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 οnclick="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>
本篇文章来源于 飞扬教程 原文链接：http://www.51fy.cn/web/JavaScript/200706/38982.html
7935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
