87,904
社区成员
发帖
与我相关
我的任务
分享用javascript實現類似dreamweaver的顏色選擇器
用javascript實現類似dreamweaver的顏色選擇器
把以下代碼拷貝存成htm文件就可以看到效果
編碼：小曉(12-23-2002)
簡要說明：256色的系統中的顏色是用00，33,66,99,cc,ff組成的
<html>
<head>
<script language=javascript>
<!--
//Like macromedia dreamweaver color picker
//programing suxingjian@hotmail.com
//create date 12-23-2002
function showColorPicker()
{if(document.all("colorTable").style.display=="none")
document.all("colorTable").style.display="";
else
document.all("colorTable").style.display="none";
var baseColor=new Array(6);
baseColor[0]="00";
baseColor[1]="33";
baseColor[2]="66";
baseColor[3]="99";
baseColor[4]="CC";
baseColor[5]="FF";
var myColor;
myColor="";
var myHTML;
myHTML="<table width=300 border=1 cellPadding=0 cellSpacing=0 bordercolordark='#ffffff' bordercolorlight='#000000'><tr><td bgcolor=#cccccc> <input id=colorInput size=6 disabled style='BACKGROUND-COLOR: #cccccc; BORDER-BOTTOM-COLOR: #000000; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #000000; BORDER-LEFT-WIDTH: 1px;BORDER-RIGHT-COLOR: #000000; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #000000; BORDER-TOP-WIDTH: 1px'><span id=colorText></span></td></tr><tr><td>";
myHTML=myHTML+"<table width='100%' border='0' cellpadding='0' cellspacing='1' bgcolor=#000000>";
for(i=0;i<6;i++)
{myHTML=myHTML+"<tr height=10>";
for(j=0;j<3;j++)
{ for(k=0;k<6;k++)
{
myColor=baseColor[j]+baseColor[k]+baseColor[i];
myHTML=myHTML+"<td width='10' onmouseover='selectColor(this.bgColor)' height='10' bgColor='"+myColor+"'></td>";
}
}
myHTML=myHTML+"</tr>";
}
for(i=0;i<6;i++)
{myHTML=myHTML+"<tr height=10>";
for(j=3;j<6;j++)
{ for(k=0;k<6;k++)
{
myColor=baseColor[j]+baseColor[k]+baseColor[i];//get Color
myHTML=myHTML+"<td width='10' onmouseover='selectColor(this.bgColor)' height='10' bgColor='"+myColor+"'></td>";
}
}
myHTML=myHTML+"</tr>";
}
myHTML=myHTML+"</table>";
myHTML=myHTML+"</td></tr></table>";
document.all("colorTable").innerHTML=myHTML;
}
function selectColor(colorStr)
{ document.all("colorText").innerHTML=" "+colorStr;
document.all("colorInput").style.backgroundColor=colorStr;
}
//-->
</script>
</head>
<body>
<input type=button name=bShowColorPicker value=ShowColorPicker onclick="showColorPicker()">
<div id=colorTable style="BACKGROUND-COLOR: #ffffff; DISPLAY: none; HEIGHT: 200px; WIDTH: 400px"></div>
</body>
</html>
把以下代碼拷貝存成htm文件就可以看到效果
編碼：小曉(12-23-2002)
簡要說明：256色的系統中的顏色是用00，33,66,99,cc,ff組成的
<html>
<head>
<script language=javascript>
<!--
//Like macromedia dreamweaver color picker
//programing suxingjian@hotmail.com
//create date 12-23-2002
function showColorPicker()
{if(document.all("colorTable").style.display=="none")
document.all("colorTable").style.display="";
else
document.all("colorTable").style.display="none";
var baseColor=new Array(6);
baseColor[0]="00";
baseColor[1]="33";
baseColor[2]="66";
baseColor[3]="99";
baseColor[4]="CC";
baseColor[5]="FF";
var myColor;
myColor="";
var myHTML;
myHTML="<table width=300 border=1 cellPadding=0 cellSpacing=0 bordercolordark='#ffffff' bordercolorlight='#000000'><tr><td bgcolor=#cccccc> <input id=colorInput size=6 disabled style='BACKGROUND-COLOR: #cccccc; BORDER-BOTTOM-COLOR: #000000; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #000000; BORDER-LEFT-WIDTH: 1px;BORDER-RIGHT-COLOR: #000000; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #000000; BORDER-TOP-WIDTH: 1px'><span id=colorText></span></td></tr><tr><td>";
myHTML=myHTML+"<table width='100%' border='0' cellpadding='0' cellspacing='1' bgcolor=#000000>";
for(i=0;i<6;i++)
{myHTML=myHTML+"<tr height=10>";
for(j=0;j<3;j++)
{ for(k=0;k<6;k++)
{
myColor=baseColor[j]+baseColor[k]+baseColor[i];
myHTML=myHTML+"<td width='10' onmouseover='selectColor(this.bgColor)' height='10' bgColor='"+myColor+"'></td>";
}
}
myHTML=myHTML+"</tr>";
}
for(i=0;i<6;i++)
{myHTML=myHTML+"<tr height=10>";
for(j=3;j<6;j++)
{ for(k=0;k<6;k++)
{
myColor=baseColor[j]+baseColor[k]+baseColor[i];//get Color
myHTML=myHTML+"<td width='10' onmouseover='selectColor(this.bgColor)' height='10' bgColor='"+myColor+"'></td>";
}
}
myHTML=myHTML+"</tr>";
}
myHTML=myHTML+"</table>";
myHTML=myHTML+"</td></tr></table>";
document.all("colorTable").innerHTML=myHTML;
}
function selectColor(colorStr)
{ document.all("colorText").innerHTML=" "+colorStr;
document.all("colorInput").style.backgroundColor=colorStr;
}
//-->
</script>
</head>
<body>
<input type=button name=bShowColorPicker value=ShowColorPicker onclick="showColorPicker()">
<div id=colorTable style="BACKGROUND-COLOR: #ffffff; DISPLAY: none; HEIGHT: 200px; WIDTH: 400px"></div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
running_su 2002-12-25
- 打赏
- 举报
呵呵，謝謝。。當然還可以有很多顏色的，但是我覺得這256已經夠用了，我們又不是在處理圖片對吧。
Tan18 2002-12-25
- 打赏
- 举报
不错，希望大家进一步完善。谢谢。
qiushuiwuhen 2002-12-25
- 打赏
- 举报
好，256个安全色，可参阅
http://www.blueidea.com/bbs/newsdetail.asp?id=733249
http://www.blueidea.com/bbs/newsdetail.asp?id=733249
blues-star 2002-12-25
- 打赏
- 举报
你的名字跟我挺象哦
ruan ming run ming runming runmin
阮铭 这两个字。
ruan ming run ming runming runmin
阮铭 这两个字。
blues-star 2002-12-25
- 打赏
- 举报
windows 的command dialog控件中有这个对话框，用法我以前发过的。
andot 2002-12-25
- 打赏
- 举报
你说的那是216种网页安全色，不是256种。呵呵。
