哎，前段開發真心不容易。。。。弄了1個小時，找找了各種素材，終于，字體選色板基本功能弄好了，UI設計技能亟待提升。先看效果：
功能介紹：點擊顏色按鈕，彈出選色板，選中一個顏色，保存設置，隱藏選色板。。。實現源碼如下：
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>color</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="javascript" src="chat.js" type="text/javascript"></script>
</head>
<body>
<SPAN> </SPAN><!--此處省略無關代碼-->
<td colspan=12 align=left><input
name="fontColor" type="button" value="顏色"
onclick="coloropen(event)" />
<!--此處省略無關代碼-->
<script type="text/javascript" language="javascript">
<!--
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00',
'00FFFF', 'FF00FF')
var current = null
function initcolor() {
getArgs();
//chat.js init();
init();
var colorTable = ''
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr height=15>'
colorTable = colorTable
+ '<td width=15>'
if (i == 0) {
colorTable = colorTable
+ '<td width=15>'
} else {
colorTable = colorTable
+ '<td width=15>'
}
colorTable = colorTable
+ '<td width=15>'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable
+ '<td width=15>'
}
}
}
}
colorTable = '<table cellspacing="0" cellpadding="0" bordercolor="000000">'
+ '<tr height=20><td colspan=21 bgcolor=#ffffff>'
+ '<span>12</span>'
+ '<span>×關閉</span>'
+ '</td></table>'
+ '<table cellspacing="0" cellpadding="0" bordercolor="000000">'
+ colorTable + '</table>';
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.length; 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;
</script>
</body>
</html>
新聞熱點
疑難解答
圖片精選
