フォントカラー選択ボードのJS実装例 code_javascriptスキル-jsチュートリアル-php.cn

ねえ、フロントエンド開発は本当に簡単ではありません。 。 。 。 1時間かけていろいろな素材を探しながら、ようやくフォントとカラーパレットの基本的な機能は準備できましたが、UIデザインのスキルの向上が急務でした。まず効果を見てみましょう:

機能の紹介: カラーボタンをクリックしてカラーパレットをポップアップし、色を選択し、設定を保存し、カラーパレットを非表示にします。 。 。実装ソースコードは以下のとおりです:

コードをコピー コードは次のとおりです: color

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

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 for (j = 0; j colorTable = colorTable '&lt ;tr height=15>' colorTable = colorTable ' ' if (i == 0) { colorTable = colorTable ' ColorHex[j] ColorHex[j] ColorHex[j] '" onclick="doclick(this.style.backgroundColor)">' } else { colorTable = colorTable ' SpColorHex[j] '" onclick="doclick(this.style.backgroundColor)">' } colorTable = colorTable '

for (k = 0; k for (l = 0; l colorTable = colorTable ' ColorHex[k i * 3] ColorHex[l] ColorHex[j] '" onclick="doclick(this.style.backgroundColor)">' } } } } 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;私は＜ 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; 调试時、自行修正doclick方法即可。