JS实现字体选色板实例代码_javascript技巧

程序员文章站 2022-05-16 14:06:14

...

哎，前段开发真心不容易。。。。弄了1个小时，找找了各种素材，终于，字体选色板基本功能弄好了，UI设计技能亟待提升。先看效果： JS实现字体选色板实例代码_javascript技巧

功能介绍：点击颜色按钮，弹出选色板，选中一个颜色，保存设置，隐藏选色板。。。实现源码如下：

复制代码代码如下:

color

name="fontColor" type="button" value="颜色"
onclick="coloropen(event)" id="fontColor" />

//chat.js init();
init();

var colorTable = ''
for (i = 0; i for (j = 0; j colorTable = colorTable + '

'
colorTable = colorTable
+ ''
if (i == 0) {
colorTable = colorTable
+ ' '
} else {
colorTable = colorTable
+ ' '
}
colorTable = colorTable
+ ' '
for (k = 0; k for (l = 0; l colorTable = colorTable
+ ' '
}
}
}
}
colorTable = ''
+ '

'
+ '12'
+ '×关闭'
+ '

'
+ ''
+ colorTable + '

';
document.getElementById("colorpane").innerHTML = colorTable;
var current_x = document.getElementById("fontColor").offsetLeft;
var current_y = document.getElementById("fontColor").offsetTop;
//alert(current_x + "-" + current_y)
document.getElementById("colorpane").style.left = current_x + "px";
document.getElementById("colorpane").style.top = current_y + "px";
}
function doclick(obj) {
//document.getElementById("fontColor").value = obj;
document.getElementById("colorpane").style.display = "none";
document.getElementById('msgbox').style.color = obj;
//alert(obj);
//var chatArea = frames["chat"].document
// .getElementsByName('chatArea');
//for ( var i = 0; i // chatArea[i].style.color = obj;
//}
}
function colorclose() {
document.getElementById("colorpane").style.display = "none";
//alert("ok");
}
function coloropen() {
document.getElementById("colorpane").style.display = "";
}
window.onload = initcolor;

调试的时候，自行修改doclick方法即可。