<FORM NAME="form1">
<TABLE><TR><TD>
<input type=text value="#ffffff" name=text0 size=10 onFocus="focus2text0(0)"
onChange="rclick(0);to16shin()">
<input type=radio name=r checked onClick="rclick(0)">背景色
<BR><input type=text value="#666666" name=text0 size=10 onFocus="focus2text0(1)"
onChange="rclick(1);to16shin()">
<input type=radio name=r onClick="rclick(1)">文字色
<P>R <input type=text name=text1 size=3 value="255" onChange="to16shin()">
1<input type=button value="↑" onClick="up(0,1)">
<input type=button value="↓" onClick="down(0,1)">
8<input type=button value="↑" onClick="up(0,8)">
<input type=button value="↓" onClick="down(0,8)">
16<input type=button value="↑" onClick="up(0,16)">
<input type=button value="↓" onClick="down(0,16)">
<P>G <input type=text name=text1 size=3 value="255" onChange="to16shin()">
1<input type=button value="↑" onClick="up(1,1)">
<input type=button value="↓" onClick="down(1,1)">
8<input type=button value="↑" onClick="up(1,8)">
<input type=button value="↓" onClick="down(1,8)">
16<input type=button value="↑" onClick="up(1,16)">
<input type=button value="↓" onClick="down(1,16)">
<P>B <input type=text name=text1 size=3 value="255" onChange="to16shin()">
1<input type=button value="↑" onClick="up(2,1)">
<input type=button value="↓" onClick="down(2,1)">
8<input type=button value="↑" onClick="up(2,8)">
<input type=button value="↓" onClick="down(2,8)">
16<input type=button value="↑" onClick="up(2,16)">
<input type=button value="↓" onClick="down(2,16)">
<P>
<input type=button value=" 暗く " onClick="dark()">
<input type=button value="明るく" onClick="light()">
<input type=button value="ランダム" onClick="rand()">
<input type=button value=" 色相 " onClick="sikisou()">
</TD><TD WIDTH=20>
</TD><TD>
<SELECT name="select0" SIZE=15 onClick="focus2select0()">
<OPTION value="#000000" style="background-color:#000000;color:#ffffff;">black
<OPTION value="#191970" style="background-color:#191970;">midnightblue
<OPTION value="#000080" style="background-color:#000080;">navy
<OPTION value="#00008B" style="background-color:#00008B;">darkblue
<OPTION value="#0000CD" style="background-color:#0000CD;">mediumblue
<OPTION value="#0000FF" style="background-color:#0000FF;">blue
<OPTION value="#00BFFF" style="background-color:#00BFFF;">deepskyblue
<OPTION value="#1E90FF" style="background-color:#1E90FF;">dodgerblue
<OPTION value="#4169E1" style="background-color:#4169E1;">royalblue
<OPTION value="#4682B4" style="background-color:#4682B4;">steelblue
<OPTION value="#483D8B" style="background-color:#483D8B;">darkslateblue
<OPTION value="#4B0082" style="background-color:#4B0082;">indigo
<OPTION value="#6A5ACD" style="background-color:#6A5ACD;">slateblue
<OPTION value="#7B68EE" style="background-color:#7B68EE;">mediumslateblue
<OPTION value="#6495ED" style="background-color:#6495ED;">cornflowerblue
<OPTION value="#87CEEB" style="background-color:#87CEEB;">skyblue
<OPTION value="#87CEFA" style="background-color:#87CEFA;">lightskyblue
<OPTION value="#ADD8E6" style="background-color:#ADD8E6;">lightblue
<OPTION value="#AFEEEE" style="background-color:#AFEEEE;">paleturquoise
<OPTION value="#B0C4DE" style="background-color:#B0C4DE;">lightsteelblue
<OPTION value="#B0E0E6" style="background-color:#B0E0E6;">powderblue
<OPTION value="#E0FFFF" style="background-color:#E0FFFF;">lightcyan
<OPTION value="#00FFFF" style="background-color:#00FFFF;">aqua
<OPTION value="#00FFFF" style="background-color:#00FFFF;">cyan
<OPTION value="#66CDAA" style="background-color:#66CDAA;">mediumaquamarine
<OPTION value="#008080" style="background-color:#008080;">teal
<OPTION value="#008B8B" style="background-color:#008B8B;">darkcyan
<OPTION value="#20B2AA" style="background-color:#20B2AA;">lightseagreen
<OPTION value="#5F9EA0" style="background-color:#5F9EA0;">cadetblue
<OPTION value="#00CED1" style="background-color:#00CED1;">darkturquoise
<OPTION value="#40E0D0" style="background-color:#40E0D0;">turquoise
<OPTION value="#48D1CC" style="background-color:#48D1CC;">mediumturquoise
<OPTION value="#7FFFD4" style="background-color:#7FFFD4;">aquamarine
<OPTION value="#00FA9A" style="background-color:#00FA9A;">mediumspringgreen
<OPTION value="#00FF7F" style="background-color:#00FF7F;">springgreen
<OPTION value="#00FF00" style="background-color:#00FF00;">lime
<OPTION value="#7CFC00" style="background-color:#7CFC00;">lawngreen
<OPTION value="#7FFF00" style="background-color:#7FFF00;">chartreuse
<OPTION value="#32CD32" style="background-color:#32CD32;">limegreen
<OPTION value="#8FBC8F" style="background-color:#8FBC8F;">darkseagreen
<OPTION value="#90EE90" style="background-color:#90EE90;">lightgreen
<OPTION value="#98FB98" style="background-color:#98FB98;">palegreen
<OPTION value="#9ACD32" style="background-color:#9ACD32;">yellowgreen
<OPTION value="#ADFF2F" style="background-color:#ADFF2F;">greenyellow
<OPTION value="#3CB371" style="background-color:#3CB371;">mediumseagreen
<OPTION value="#006400" style="background-color:#006400;">darkgreen
<OPTION value="#008000" style="background-color:#008000;">green
<OPTION value="#228B22" style="background-color:#228B22;">forestgreen
<OPTION value="#2E8B57" style="background-color:#2E8B57;">seagreen
<OPTION value="#2F4F4F" style="background-color:#2F4F4F;">darkslategray
<OPTION value="#556B2F" style="background-color:#556B2F;">darkolivegreen
<OPTION value="#808000" style="background-color:#808000;">olive
<OPTION value="#6B8E23" style="background-color:#6B8E23;">olivedrab
<OPTION value="#708090" style="background-color:#708090;">slategray
<OPTION value="#778899" style="background-color:#778899;">lightslategray
<OPTION value="#696969" style="background-color:#696969;">dimgray
<OPTION value="#808080" style="background-color:#808080;">gray
<OPTION value="#A9A9A9" style="background-color:#A9A9A9;">darkgray
<OPTION value="#C0C0C0" style="background-color:#C0C0C0;">silver
<OPTION value="#D3D3D3" style="background-color:#D3D3D3;">lightgrey
<OPTION value="#DCDCDC" style="background-color:#DCDCDC;">gainsboro
<OPTION value="#800080" style="background-color:#800080;">purple
<OPTION value="#8B008B" style="background-color:#8B008B;">darkmagenta
<OPTION value="#C71585" style="background-color:#C71585;">mediumvioletred
<OPTION value="#9370DB" style="background-color:#9370DB;">mediumpurple
<OPTION value="#8A2BE2" style="background-color:#8A2BE2;">blueviolet
<OPTION value="#9400D3" style="background-color:#9400D3;">darkviolet
<OPTION value="#9932CC" style="background-color:#9932CC;">darkorchid
<OPTION value="#BA55D3" style="background-color:#BA55D3;">mediumorchid
<OPTION value="#DA70D6" style="background-color:#DA70D6;">orchid
<OPTION value="#EE82EE" style="background-color:#EE82EE;">violet
<OPTION value="#DDA0DD" style="background-color:#DDA0DD;">plum
<OPTION value="#D8BFD8" style="background-color:#D8BFD8;">thistle
<OPTION value="#E6E6FA" style="background-color:#E6E6FA;">lavender
<OPTION value="#BC8F8F" style="background-color:#BC8F8F;">rosybrown
<OPTION value="#8B4513" style="background-color:#8B4513;">saddlebrown
<OPTION value="#A0522D" style="background-color:#A0522D;">sienna
<OPTION value="#B8860B" style="background-color:#B8860B;">darkgoldenrod
<OPTION value="#CD853F" style="background-color:#CD853F;">peru
<OPTION value="#DAA520" style="background-color:#DAA520;">goldenrod
<OPTION value="#CD5C5C" style="background-color:#CD5C5C;">indianred
<OPTION value="#D2691E" style="background-color:#D2691E;">chocolate
<OPTION value="#D2B48C" style="background-color:#D2B48C;">tan
<OPTION value="#DEB887" style="background-color:#DEB887;">burlywood
<OPTION value="#EEE8AA" style="background-color:#EEE8AA;">palegoldenrod
<OPTION value="#F0E68C" style="background-color:#F0E68C;">khaki
<OPTION value="#BDB76B" style="background-color:#BDB76B;">darkkhaki
<OPTION value="#800000" style="background-color:#800000;">maroon
<OPTION value="#8B0000" style="background-color:#8B0000;">darkred
<OPTION value="#A52A2A" style="background-color:#A52A2A;">brown
<OPTION value="#B22222" style="background-color:#B22222;">firebrick
<OPTION value="#DC143C" style="background-color:#DC143C;">crimson
<OPTION value="#FF0000" style="background-color:#FF0000;">red
<OPTION value="#FF1493" style="background-color:#FF1493;">deeppink
<OPTION value="#FF69B4" style="background-color:#FF69B4;">hotpink
<OPTION value="#FFB6C1" style="background-color:#FFB6C1;">lightpink
<OPTION value="#FFC0CB" style="background-color:#FFC0CB;">pink
<OPTION value="#DB7093" style="background-color:#DB7093;">palevioletred
<OPTION value="#FF00FF" style="background-color:#FF00FF;">fuchsia
<OPTION value="#FF00FF" style="background-color:#FF00FF;">magenta
<OPTION value="#F08080" style="background-color:#F08080;">lightcoral
<OPTION value="#FA8072" style="background-color:#FA8072;">salmon
<OPTION value="#E9967A" style="background-color:#E9967A;">darksalmon
<OPTION value="#FFA07A" style="background-color:#FFA07A;">lightsalmon
<OPTION value="#F4A460" style="background-color:#F4A460;">sandybrown
<OPTION value="#FF4500" style="background-color:#FF4500;">orangered
<OPTION value="#FF6347" style="background-color:#FF6347;">tomato
<OPTION value="#FF7F50" style="background-color:#FF7F50;">coral
<OPTION value="#FF8C00" style="background-color:#FF8C00;">darkorange
<OPTION value="#FFA500" style="background-color:#FFA500;">orange
<OPTION value="#FFD700" style="background-color:#FFD700;">gold
<OPTION value="#FFFF00" style="background-color:#FFFF00;">yellow
<OPTION value="#F5DEB3" style="background-color:#F5DEB3;">wheat
<OPTION value="#FFDAB9" style="background-color:#FFDAB9;">peachpuff
<OPTION value="#FFDEAD" style="background-color:#FFDEAD;">navajowhite
<OPTION value="#FFE4B5" style="background-color:#FFE4B5;">moccasin
<OPTION value="#FFE4C4" style="background-color:#FFE4C4;">bisque
<OPTION value="#FFE4E1" style="background-color:#FFE4E1;">mistyrose
<OPTION value="#FFEBCD" style="background-color:#FFEBCD;">blanchedalmond
<OPTION value="#FFEFD5" style="background-color:#FFEFD5;">papayawhip
<OPTION value="#F5F5DC" style="background-color:#F5F5DC;">beige
<OPTION value="#FAEBD7" style="background-color:#FAEBD7;">antiquewhite
<OPTION value="#FAF0E6" style="background-color:#FAF0E6;">linen
<OPTION value="#FAFAD2" style="background-color:#FAFAD2;">lightgoldenrodyellow
<OPTION value="#FDF5E6" style="background-color:#FDF5E6;">oldlace
<OPTION value="#FFF0F5" style="background-color:#FFF0F5;">lavenderblush
<OPTION value="#FFF5EE" style="background-color:#FFF5EE;">seashell
<OPTION value="#FFF8DC" style="background-color:#FFF8DC;">cornsilk
<OPTION value="#FFFACD" style="background-color:#FFFACD;">lemonchiffon
<OPTION value="#FFFFE0" style="background-color:#FFFFE0;">lightyellow
<OPTION value="#FFFAF0" style="background-color:#FFFAF0;">floralwhite
<OPTION value="#FFFAFA" style="background-color:#FFFAFA;">snow
<OPTION value="#FFFFF0" style="background-color:#FFFFF0;">ivory
<OPTION value="#F0F8FF" style="background-color:#F0F8FF;">aliceblue
<OPTION value="#F0FFF0" style="background-color:#F0FFF0;">honeydew
<OPTION value="#F0FFFF" style="background-color:#F0FFFF;">azure
<OPTION value="#F5F5F5" style="background-color:#F5F5F5;">whitesmoke
<OPTION value="#F5FFFA" style="background-color:#F5FFFA;">mintcream
<OPTION value="#F8F8FF" style="background-color:#F8F8FF;">ghostwhite
<OPTION value="#FFFFFF" style="background-color:#FFFFFF;">white
</select>
</TD></TR></TABLE>
</FORM>
<SCRIPT language="JavaScript">
<!--
function up(n,m){
if(document.form1.text1[n].value<=255-m){
nn=document.form1.text1[n].value-0+m;
document.form1.text1[n].value=nn;
to16shin();
}
}
function down(n,m){
if(document.form1.text1[n].value>=0+m){
document.form1.text1[n].value-=m;
to16shin();
}
}
function dark(){
for(n=0;n<3;n++){
down(n,16);
}
}
function light(){
for(n=0;n<3;n++){
up(n,16);
}
}
function rand(){
for(n=0;n<3;n++){
document.form1.text1[n].value=Math.floor(Math.random() * 255);
to16shin();
}
}
function sikisou(){
a=document.form1.text1[0].value;
document.form1.text1[0].value=document.form1.text1[1].value;
document.form1.text1[1].value=document.form1.text1[2].value;
document.form1.text1[2].value=a;
to16shin();
}
// text1からもってきた数値を16進変換してtext0にしまう
// text0の値に背景色(文字色)変更
function to16shin(){
if(document.form1.r[0].checked) a=0;
else a=1;
// チェック。text1は0〜255の数字かどうか。
for(i=0;i<3;i++){
if(document.form1.text1[i].value-0<0 || isNaN(document.form1.text1[i].value-0)){
document.form1.text1[i].value=0;
}
else if(document.form1.text1[i].value-0>255){
document.form1.text1[i].value=255;
}
}
r=new Array(3);
g=new Array(3);
b=new Array(3);
r[a]=(document.form1.text1[0].value-0).toString(16);
g[a]=(document.form1.text1[1].value-0).toString(16);
b[a]=(document.form1.text1[2].value-0).toString(16);
if(document.form1.text1[0].value-0<=15) r[a]="0"+r[a];
if(document.form1.text1[1].value-0<=15) g[a]="0"+g[a];
if(document.form1.text1[2].value-0<=15) b[a]="0"+b[a];
document.form1.text0[a].value="#"+r[a]+g[a]+b[a];
if(a==0) document.bgColor=document.form1.text0[a].value;
else document.fgColor=document.form1.text0[a].value;
}
// text0から数値をもって来て10進変換、text1にしまう
// 文字数が足りない場合、変な文字の場合は0で補完
function rclick(n){
document.form1.text1[0].value=(document.form1.text0[n].value.substring(1, 3));
document.form1.text1[1].value=(document.form1.text0[n].value.substring(3, 5));
document.form1.text1[2].value=(document.form1.text0[n].value.substring(5, 7));
for(a=0;a<3;a++){
document.form1.text1[a].value
=parseInt(document.form1.text1[a].value,16).toString(10);
if(isNaN(parseInt(document.form1.text1[a].value,16)))
document.form1.text1[a].value=0;
}
}
// フォーカスがtext0内に移動したら対応するラジオボタンにチェック
function focus2text0(n){
document.form1.r[n].checked=true;
}
function focus2select0(){
if(document.form1.r[0].checked) a=0;
else a=1;
i=document.form1.select0.selectedIndex;
document.form1.text0[a].value=document.form1.select0.options[i].value;
rclick(a);
to16shin();
}
//-->
</SCRIPT>
|
● 設置方法
上の文をHTML文の<BODY>〜</BODY>の中のお好きなところに貼り付けて下さい。
● 本日のテーマ
今回はですね、素敵な関数をたくさん使いまくってます。
ん？ そういやJavaScriptでも関数でいいのかな？ よくわかんないけどまあいいや。
今回使った主な関数？の意味はこんな感じです。
|
■parseInt(x,n) 文字列xをn進数に変換 ■x.toString(n) 数値xをn進数に変換 ■x.substring(n,m) 文字列xのn番目からm-1番目までの文字を取り出し ■Math.floor(Math.random() * n) 0からnまでの乱数 ■isNaN(x) xは数値かどうかチェック(if文にいれる) |
厳密に言えば正しくないので(多分間違いでもないけど)、興味のある方は別のところで調べましょう。
そういやフォームのバリューは強制的に文字列になるんですかね？
● 今回の反省
このスクリプト、書きながら段々混乱していきましたね。あはは。
to16shin()なんて妙に怪しいんですけど。作りが(笑)。
色辞典、一応見た目いい感じになるように並べ替えしてたんですけど途中で飽きました。
分かる人はこれだけ持ってって何かに使ってもいいですよ。
最近、お世話になってる某小説サイトで背景色と文字色を変えられるページってのが
流行って？るんですよ。んでは私も何かしなきゃなぁってことでちょいと作ってみました。
でもですね、当初の目的(色を設定して全ページその色で見る)を完全に忘れ去ってます。
ただ色を作っているだけ(笑)。まあ、クッキーかますなり何なりすればいいだけなんですが。