とほほのWWW入門 > とほほのJavaScript入門 > 背景色エディタ
このソースコードは以下のようになります。
<HTML>
<HEAD>
<TITLE>JavaScript Sample(Background Color Editor)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function color(text, flag) {
n = "0123456789ABCDEF".indexOf(text.value) + flag;
n = Math.max(0, Math.min(n, 15));
text.value = "0123456789ABCDEF".charAt(n);
document.bgColor =
"#" +
document.form1.r1.value +
document.form1.r2.value +
document.form1.g1.value +
document.form1.g2.value +
document.form1.b1.value +
document.form1.b2.value;
}
function init() {
document.bgColor;
document.form1.r1.value = document.bgColor.charAt(1).toUpperCase();
document.form1.r2.value = document.bgColor.charAt(2).toUpperCase();
document.form1.g1.value = document.bgColor.charAt(3).toUpperCase();
document.form1.g2.value = document.bgColor.charAt(4).toUpperCase();
document.form1.b1.value = document.bgColor.charAt(5).toUpperCase();
document.form1.b2.value = document.bgColor.charAt(6).toUpperCase();
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H2>JavaScriptサンプル(背景色エディタ)</H2>
<FORM NAME="form1" ACTION="">
<TABLE>
<TR>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.r1, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.r2, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.g1, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.g2, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.b1, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.b2, 1)"></TD>
</TR>
<TR>
<TD><INPUT TYPE="text" NAME="r1" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="r2" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="g1" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="g2" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="b1" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="b2" SIZE=3 VALUE=""></TD>
</TR>
<TR>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.r1, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.r2, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.g1, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.g2, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.b1, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.b2, -1)"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>