JavaScript           
 背景色の変更


 
 
 
 
 
 


 

1. 内容

 

 

  実行結果  実際のソース

document.bgColor の値を変え,背景色の変更する。

 

2. ソース
 

 

<SCRIPT Language="JavaScript">
<!--


var c=0;
var cr=0;
var cg=0;
var cb=0;

// ---- RED ----
function color_chg_RP(){
if( (cr+1) <= 0xf ){
++cr;
c=c+0x100000;
write_c();
document.MyForm.red.value =(cr*0x10).toString(16);
}
}

function color_chg_RM(){
if( (cr-1) >= 0x0 ){
--cr;
c=c-0x100000;
write_c();
document.MyForm.red.value =(cr*0x10).toString(16);
}
}

// ---- GREEN ----
function color_chg_GP(){
if( (cg+1) <= 0xf ){
++cg;
c=c+0x001000;
write_c();
document.MyForm.green.value =(cg*0x10).toString(16);
}
}

function color_chg_GM(){
if( (cg-1) >= 0x0 ){
--cg;
c=c-0x001000;
write_c();
document.MyForm.green.value =(cg*0x10).toString(16);
}
}

// ---- BLUE -----

function color_chg_BP(){

if( (cb+1) <= 0xf ){
++cb;
c=c+0x000010;
write_c();
document.MyForm.blue.value =(cb*0x10).toString(16);
}
}

function color_chg_BM(){

if( (cb-1) >= 0x0 ){
--cb;
c=c-0x000010;
write_c();
document.MyForm.blue.value =(cb*0x10).toString(16);
}
}

function write_c(){

document.bgColor = c;
status= "COLOR = #"+c.toString(16);


}

// -->
</SCRIPT>

 

見て分かるように,スクリプトは同じ繰り返しが多い。

うまく,整理すれば6分の1とはいかなくても,4分の1ぐらいのはなるでしょう。

ただし,この方が理解はしやすいが,ちょっとはずかしい。

 

 

3. 解説 (色)


 

 

     
#FF0000 #00FF00 #0000FF

 

色は #●●□□▲▲ 16進6ケタの数で制御される。

●●:赤  00〜FF

□□:緑  00〜FF

▲▲:青  00〜FF

 

例えば,#FFFF00 は赤と緑で黄色

 



4. 解説 (表示)


 

1. ステータスバーへの表示

 status= "★★★"   と書けば バーに★★★が表示される。

 

[例]

status= "COLOR = #"+c.toString(16);

c.toString(16)は cに入っている数字を16進の文字に変化するの意。

 

2. フォームへの書き込み

 document.MyForm.green.value = "***" でOK。

MyForm : フォームの名前

green   : エレメント名

 

要するに,文書(document)の(MyForm)というFORMの

(green)というエレメントの値(value)を***にするという意。

 

[例]

フォームの定義

<FORM NAME="MyForm">

<INPUT size="2" type="text" name="red" value="0" maxlength="2">

フォームへの書き込み

document.MyForm.red.value =(cr*0x10).toString(16);

crには赤の2ケタ目の数字が入っている。

 

5.解説 (書式)


 

オブジェクト メソッド プロパティ 引数 書式 実行内容
document write   ("○") document.write("○") ページ内に○○の文字を出力
document   bgColor

★カラーコード

  カラー名

document.bgColor = ★

document.bgColor = 'red'

背景色 を設定する

  toString   ★変数  ◆基数 ★.toString(◆) ★をn(◆)進数に変換します
window   status ★文字や数値 status = ★ ステータスバーに文字や数値を表示します


 





Copyright (C) 2000 UP-BEAT. All Rights Reserved.