怎么调用html调色板,JS实现仿PS的调色板效果完整实例

本文实例讲述了JS实现仿PS的调色板效果。分享给大家供大家参考，具体如下：

运行效果图如下：

完整实例代码：

#colorpad table{

border-collapse:collapse;

cellpadding:0;

cellspacing:0;

width:255px;

height:255px;

border:0;

}

#colorpadright table{

border-collapse:collapse;

cellpadding:0;

cellspacing:0;

width:255px;

height:20px;

border:0;

}

#colorpad{

width:255px;

height:255px;

}

#colorpadsample{

width:100px;

height:100px;

}

#colorpadright{

height:20px;

width:255px;

}

td{

border:0;

width:1px;

height:1px;

margin:0;padding:0

}

function setColor(style){

document.getElementById('colorpadsample').style.background=style;

var stylestylepiect1=style.split(',')[0];

var stylestylepiect2=style.split(',')[2];

var html='';var style='';

html+='

html+='

';

for(var i=0;i<256;i++){

style= stylepiect1+','+i+','+stylepiect2;

html+='

';

html+='

';

}

html+='

';

html+='

';

document.getElementById('colorpadright').innerHTML=html;

}

var html='';

html+='

for(var i=0;i<256;i++){

html+='

';

for(var j=0;j<256;j++){

html+='

';

html+='

';

}

html+='

';

}

html+='

';

document.getElementById('colorpad').innerHTML=html;

时间仓促，用css的背景样式，js打印255*255的调色板，只写了RB固定 G变的部分，由于所有颜色展现对浏览器负载比较大，所以不推荐使用类似的调色板。

PS：这里再为大家推荐几款本站的相关在线工具：

希望本文所述对大家JavaScript程序设计有所帮助。