아, 프론트엔드 개발은 정말 쉽지 않네요. . . . 한 시간 동안 작업하고 다양한 자료를 검색한 끝에 마침내 글꼴과 색상 팔레트의 기본 기능이 준비되었지만 UI 디자인 기술의 향상이 시급했습니다. 먼저 효과를 살펴보겠습니다. 기능 소개: 색상 버튼을 클릭하면 색상 팔레트가 팝업되고, 색상을 선택하고, 설정을 저장하고, 색상 팔레트를 숨길 수 있습니다. . . 구현 소스코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. color name="fontColor" type="button" value="颜色" onclick="coloropen(event)" id="fontColor" /> <br> <!--<BR> var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')<BR> var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00',<BR> '00FFFF', 'FF00FF')<BR> var current = null<BR> function initcolor() {<BR> getArgs();</P> <P> //chat.js init();<BR> init();</P><P> var colorTable = ''<BR> for (i = 0; i < 2; i ) {<BR> for (j = 0; j < 6; j ) {<BR> colorTable = colorTable '< ;tr height=15>'<br> colorTable = colorTable<br> '<td width=15 style="Background-color:#000000">'<br> if (i == 0) {<br> colorTable = colorTable<br> '<td width=15 style="cursor:pointer; background-color:#'<BR> ColorHex[j]<BR> ColorHex[j]<BR> ColorHex[j]<BR> '" onclick="doclick(this.style.BackgroundColor)">'<br> } else {<br> colorTable = colorTable<br> '<td width=15 style="cursor:pointer; background-color: #'<BR> SpColorHex[j]<BR> '" onclick="doclick(this.style.BackgroundColor)">'<br> }<br> colorTable = colorTable<br> '<td width=15 스타일 ="배경색:#000000">'<br> for (k = 0; k < 3; k ) {<BR> for (l = 0; l < 6; l ) {<BR> colorTable = colorTable<BR> '<td width=15 style="cursor:pointer; background-color:#'<BR> ColorHex[k i * 3]<BR> ColorHex[l]<BR> ColorHex[j]<BR> '" onclick="doclick(this.style.groundColor)">'<br> }<br> }<br> }<br> }<br> colorTable = '<table border="0" cellpacing= "0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse:collapse;width:337px;" bordercolor="000000">'<br> '<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'<br> '<span style="float:left;color:#999999;">12</span>'<br> '<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>'<br> '</td></table>'<br> '<table border="1" cellpacing="0" cellpadding ="0" style="border-collapse:collapse" bordercolor="000000" style="cursor:pointer;">'<br> colorTable '</table>';<br> document.getElementById("colorpane ").innerHTML = colorTable;<br> var current_x = document.getElementById("fontColor").offsetLeft;<br> var current_y = document.getElementById("fontColor").offsetTop;<br> //alert(current_x " -" current_y) <br> document.getElementById("colorpane").style.left = current_x "px";<br> document.getElementById("colorpane").style.top = current_y "px";<br> } <br> 함수 doclick(obj) {<br> //document.getElementById("fontColor").value = obj;<br> document.getElementById("colorpane").style.display = "none";<br> document.getElementById('msgbox').style.color = obj;<br> //alert(obj);<br> //var chatArea = 프레임["chat"].document<br> // .getElementsByName(' chatArea');<br> //for ( var i = 0; 나는 < chatArea.length; i ) {<BR> // chatArea[i].style.color = obj;<BR> //}<BR> }<BR> function colorclose() {<BR> document.getElementById("colorpane").style .display = "없음";<BR> //alert("ok"); <BR> }<BR> function coloropen() {<BR> document.getElementById("colorpane").style.display = "";<BR> }<BR> window.onload = initcolor;<BR> </ script><br></body><br></html><br></p> </div> <br>调试的时候,自行修改doclick방법即可。