网页文章标题颜色生成代码及效果[在线生成工具]
在做一个后台程序，发现需要给文章标题添加颜色。看了一些网站的 颜色生成 代码，特别复杂或功能较强大，不 想用他们的，遂自己花时间写了一个较简单、实用的网页颜色生成小程序，另外，单独整理出了一个颜色代码生成工具 （为一个页面），全部分享出来，大家若觉得有用，可进行收藏、下载。
下面详细介绍下源码及说明，大家可自行修改、使用。
一、此小程序实现的功能及效果
1、可对颜色面板进行颜色选择，并有效果预览；
2、选择颜色后，RGB代码会自动在文本框中生成；
3、颜色面板为悬浮层显示，带有透明层，与页面层分离，体验效果更好；
4、面板带有关闭按钮，亦可点击透明层关闭面板，此效果可自行修改代码调整；
5、带有复制代码事件（颜色代码生成工具中含有）；
6、没有做输入RGB代码，可预览效果，对于此程序不够实用，若想实现此效果只需加一个文本框触发事件即可；
7、界面效果，如下图所示：
二、颜色代码生成工具的功能及说明
1、打开页面，即看到颜色选择面板；
2、选择颜色后，RGB代码，会自动在文本框中生成，同上面；
3、没有悬浮及效果，此工具目的：快速获取想要颜色的RGB代码，并进行复制操作；
4、复制按钮，兼容了IE、firefox、chrome、360等主流浏览器，皆可进行复制。此项为本人特别实现的，大家可收藏 其中复制代码。
5、生成工具界面效果，如下图所示：
对于颜色种数调整、样式修改、事件改动，请详细查看第三点：代码讲解， 文章最后有效果查看及源码下载。
三、页面主体JS代码说明
function chooseColor(color){//此为选择颜色后，触发函数
document.getElementById("preview").style.backgroundColor = color;
document.getElementById("color").value = color;
closeDiv();//选择颜色后，会关闭颜色面板，若不想关闭，继续选择对比，可将 此句注释
}
function closeDiv(){//关闭层函数
document.getElementById("colorDiv").style.display = "none";
document.getElementById("colorBgDiv").style.display = "none";
}
function copy_code() {//复制代码函数
var explorer = window.navigator.userAgent;
var str = document.getElementById("color").value;//获取颜色文 本框值
if(explorer.indexOf("MSIE") >= 0){//判断浏览器
window.clipboardData.setData("Text",str);
alert("颜色代码成功复制!");
}
else if(explorer.indexOf("Firefox") >= 0){
copy(str);//若为IE外浏览器，调用此函数
alert("成功复制!");
}
else if(explorer.indexOf("Chrome") >= 0){
copy(str);
alert("成功复制!");
}
}
function copy(str) {//除IE外其他浏览器复制代码处理函数(flash方式实现复制)
var flashcopy = ‘flashcopy’;
if(!document.getElementById(flashcopy))
{
var divholder = document.createElement (‘div’);
divholder.id = flashcopy;
document.body.appendChild(divholder);
}
document.getElementById(flashcopy).innerHTML = ”;
var divinfo = ‘<embed src="clipboard.swf" FlashVars="clipboard=’+str+’" width="0" height="0" type="application/x-shockwave-flash"></embed>’;//创建flash
document.getElementById(flashcopy).innerHTML = divinfo;
}
function showColorPannel(){//关键的颜色面板输出 函数
var color;
var R;
var G;
var B;
//255*255*255
count=15*16+15;
var html="";
html += "<div id=’colorBgDiv’ style=’position:absolute;top:0;left:0;width:100%;height:100%;
background:#555;opacity:0.5;filter:alpha (opacity=50);’ onclick=\"closeDiv();\"></div>
<div id=’colorDiv’ style=’background:#fff;position:absolute;top:50%;left:50%;
margin: -102px 0 0 -202px;border:#ccc 1px solid;padding:2px;’>";//此段为悬浮层及背景层样式，根据需要可进行修改
background:#555;opacity:0.5;filter:alpha (opacity=50);’ onclick=\"closeDiv();\"></div>
<div id=’colorDiv’ style=’background:#fff;position:absolute;top:50%;left:50%;
margin: -102px 0 0 -202px;border:#ccc 1px solid;padding:2px;’>";//此段为悬浮层及背景层样式，根据需要可进行修改
html += "<table width=’225′ border=0><tr><td><a onclick=\"chooseColor(‘#ff0000′)\" style=’padding:0px 8px;background-color:#ff0000;’></a></td><td><a onclick=\"chooseColor (‘#008000′)\" style=’padding:0px 8px;background- color:#008000;’></a></td><td><a onclick=\"chooseColor(‘#0000ff’)\" style=’padding:0px 8px;background-color:#0000ff;’></a></td><td><a onclick= \"chooseColor(‘#ff6600′)\" style=’padding:0px 8px;background- color:#ff6600;’></a></td><td align=’right’><a onclick=’closeDiv ();’>Close</a></td></tr></table><table border=0>";//此段为面板表格 样式及顶部分的几种固定颜色的代码，颜色同样可进行修改，怎么修改就不讲了
for(R=0;R<count;R++){//关键的 开始循环代码
html += "<tr>";
for(G=0;G<count;G++){
for(B=0;B<count;B++){
if(R<10){
RR="0"+R.toString(16);
}else{
RR=R.toString(16);
}
if(B<10){
BB="0"+B.toString(16);
}else{
BB=B.toString(16);
}
if(G<10){
GG="0"+G.toString(16);
}else{
GG=G.toString(16);
}
color=RR+""+GG +""+BB;
html += "<td bgcolor=’#"+color+"’ width=10 height=10 onMouseOver=\"this.style.cursor=’pointer’\" onclick=\"chooseColor(‘#"+color+"’)\"></td>";
B+=80;//此处意为蓝色RGB加80的值，此为80 ，蓝色区将循环255/80 = 四次
}//B end
G+=80;//同蓝色，B与G决定了面板的列数，如果 蓝色循环4次，绿色循环4次，面板将有16列
}//G end
R+=40;//此处为红色循环次数，R决定了面板行数，循环4次，即 为四行
html += "</tr>";
}//R end
html += "</table></div>";//面板代码结束
document.getElementById("choose").innerHTML=html;//输出显示
本博文章基本上属于原创或收集整理，都是心血结晶。
欢迎转载分享，转载请注明出处，谢谢！
本文地址：网页文章标题颜色生成代码及效果[在线生成工具]