本文实例讲述了JS实现的系统调色板。分享给大家供大家参考,具体如下:
运行效果图如下:
整体页面代码:
DW调色板var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
function getEvent()
{
if(document.all)
{
return window.event;//如果是ie
}
func=getEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
}
function intocolor()
{
var colorTable=''
for (i=0;i<2;i++) //循环2部分
{
for (j=0;j<6;j++) //循环6行
{
colorTable=colorTable+'
'for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'
'}
}
}
}
colorTable='
+'
'+'
+'
当前色:'+'
'+'
+colorTable+'
';colorpanel.innerHTML=colorTable
}
function doOver() {
var evt=getEvent();
var element=evt.srcElement || evt.target;
var DisColor=document.getElementById("DisColor");
var HexColor=document.getElementById("HexColor");
if ((element.tagName=="TD") && (current!=element)) {
if (current!=null){
current.style.backgroundColor = current._background
}
element._background = element.style.backgroundColor
DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)
HexColor.value = rgbToHex(element.style.backgroundColor)
element.style.backgroundColor = "white"
current = element
}
}
function rgbToHex(aa)
{
if(aa.indexOf("rgb") != -1)
{
aa=aa.replace("rgb(","")
aa=aa.replace(")","")
aa=aa.split(",")
r=parseInt(aa[0]);
g=parseInt(aa[1]);
b=parseInt(aa[2]);
r = r.toString(16);
if (r.length == 1) { r = '0' + r; }
g = g.toString(16);
if (g.length == 1) { g = '0' + g; }
b = b.toString(16);
if (b.length == 1) { b = '0' + b; }
return ("#" + r + g + b).toUpperCase();
}
else
{
return aa;
}
}
function doOut() {
if (current!=null) current.style.backgroundColor = current._background;
}
function doclick(){
var evt=getEvent();
var element=evt.srcElement || evt.target;
if (element.tagName=="TD"){
var bg=rgbToHex(element._background);
document.getElementById("orange").value=bg;
alert("选取颜色: "+bg);
return bg;
}
}
|
PS:这里再为大家推荐几款本站的相关在线工具:
在线RGB、HEX颜色代码生成器:http://tools.ddpool.cn/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:http://tools.ddpool.cn/color/jPicker
在线网页调色板工具:http://tools.ddpool.cn/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表:http://tools.ddpool.cn/color/colorpicker
希望本文所述对大家JavaScript程序设计有所帮助。