哎，前段開發真心不容易。。。。弄了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 style="margin:8px;"><!--此處省略無關代碼--><td colspan=12 align=left style="word-break:break-all"><inputname="fontColor" type="button" value="顏色"onclick="coloropen(event)" id="fontColor" /><!--此處省略無關代碼--><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 = nullfunction 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 style="background-color:#000000">'if (i == 0) {colorTable = colorTable+ '<td width=15 style="cursor:pointer;background-color:#'+ ColorHex[j]+ ColorHex[j]+ ColorHex[j]+ '" onclick="doclick(this.style.backgroundColor)">'} else {colorTable = colorTable+ '<td width=15 style="cursor:pointer;background-color:#'+ SpColorHex[j]+ '" onclick="doclick(this.style.backgroundColor)">'}colorTable = colorTable+ '<td width=15 style="background-color:#000000">'for (k = 0; k < 3; k++) {for (l = 0; l < 6; l++) {colorTable = colorTable+ '<td width=15 style="cursor:pointer;background-color:#'+ ColorHex[k + i * 3]+ ColorHex[l]+ ColorHex[j]+ '" onclick="doclick(this.style.backgroundColor)">'}}}}colorTable = '<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'+ '<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'+ '<span style="float:left;color:#999999;">12</span>'+ '<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×關閉</span>'+ '</td></table>'+ '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'+ 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>
調試的時候，自行修改doclick方法即可。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
