Ah, it's really not easy to develop some projects .... After an hour, I searched for various materials and finally finished the basic functions of the font color palette. The uidesign skills need to be improved. First look at the effect:
Function Description: Click the color button to display a color palette. Select a color, Save settings, and hide the color palette... The source code is as follows:
Copy codeThe Code is as follows:
<! 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;">
<SPAN style = "WHITE-SPACE: pre"> </SPAN> <! -- Irrelevant code is omitted here -->
<Td colspan = 12 align = left style = "word-break: break-all"> <input
Name = "fontColor" type = "button" value = "color"
Onclick = "coloropen (event)" id = "fontColor"/>
<! -- Irrelevant code is omitted here -->
<Script type = "text/javascript" language = "javascript">
<! --
Var ColorHex = new Array ('00', '33', '66', '99', 'cc', 'ff ')
Var SpColorHex = new Array ('ff000000', '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 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 ()"> × close </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" example .doc ument
//. GetElementsByName ('chatare ');
// 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>
Modify the doclick method when debugging.