HTMLファイルの背景色を黒から白に徐々に変化させたい

平成17年発行の、『ホームページを飾るJavaScript入門』という本のサンプルコードからの質問です。
コードは以下

<HEAD>
	<TITLE>bgcolor</TITLE>
		<SCRIPT LANGUAGE="JavaScript">
		function dispbk(t){
			for(i=0; i<=255; i++){
				for(j=0; j<t; j++){
					c=i+i*256+i*256*256;
					c="000000"+c.toString(16);
					c=c.substring(c.length-6,c.length);
					document.bgColor=c;
				}
			}
		}
	</SCRIPT>
</HEAD>
<BODY>
	<SCRIPT LANGUAGE="JavaScript">
		dispbk(3);
	</SCRIPT>
	<HR>
	<H1><FONT COLOR=pink>Welcome to Cingyan's HomePage!</FONT></H1>
	<HR>
</BODY>
</HTML>

本を書き写して打ち間違いはないともいますが、ブラウザの背景は白のままです。
document.bgColor
というのは非推奨だそうで
document.body.style.backgroundColor
をやっても変化なし。

document.bgColor="#000ff";
とすると色は着くので使えると思います。

document.write(c);
で確認すると色の十六進数が表示されました。

c=""+"#"+c+""";
こんなことをして、
document.bgColor
に代入しても変化なし。

背景色の設定に変数を使う所でうまくいかないみたいですが、納得がいきません。
うまくいきそうなのですが、できない。

他にもいろいろ試しましたが、教えてもらいたいです。
古い本だからブラウザが対応していないのかもしれません。
ブラウザは、FireFox 100.0(64bit)

JavaScriptの勉強を始めたばかりですので、一番簡単な修正があれば教えてください。簡単でなくてもいいですが。
または、このコードでは実現できないのでしょうか。
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

参考にするコードが古すぎます。教材ごと別物にすることをおすすめします。

投稿2022/05/07 14:31

maisumakun

総合スコア145184

cingyan

2022/05/07 14:48

古すぎますか。簡単なコードで別の回答があれば参考にしたいと思うのはいけませんか。やはりブラウザが対応していないということでしょうか。

maisumakun

2022/05/07 15:07

「それだけを早急に実現したい」という付け焼き刃な態度で一向にかまわないと言うなら止めませんが、自分で自由にプログラミングできることを目的とするなら道から外れていっているような印象です。

cingyan

2022/05/07 22:07

最新の教材で学んでいけば今回の古いコードが対応していない理由が分かるかもしれませんね。ありがとうございました。

cingyan

2022/05/08 00:25

ネットスケープ 4 で実行できました。古い技術が使われなくなった理由は今後の勉強で知りたいと思います。ありがとうございました。

行動規範の内容に同意します

おそらく処理が速すぎて色の変化に気付かないだけではないかと、、、
document.bgColorは非推奨ですがまだ主要ブラウザでは対応されているので気にすることではないです。

投稿2022/05/08 08:24

a.‫com

総合スコア871

cx20

2022/05/08 09:49

> おそらく処理が速すぎて色の変化に気付かないだけではないかと、、、 dispbk(3) の「3」→「300」にするなどして試してみましたが、変化しないですね。速すぎるからというより、ループが終わってようやく描画されるといった動きのようでした。 20年前と今とでは描画周りの実装が変わっているのかもしれません。

a.‫com

2022/05/08 11:15

そうでしたか、失礼しました。javascript実行中は再描画されないのかもしれないですね。

行動規範の内容に同意します

こんな感じでいかがでしょう？

https://jsfiddle.net/cx20/0ty45mcb/2/

JavaScript
1function dispbk(t){
2    for(let i=0; i<=255; i++){
3        // タイマーの時間をミリ秒 (1/1000 秒) 単位で指定
4        let delay = i/255 * t * 1000;
5        setTimeout(changeColor, delay, i);
6    }
7}
8function changeColor(color) {
9    // 背景色を "rgb(255, 255, 255)" の形式で指定
10    let c = `rgb(${color},${color},${color})`;
11    document.body.style.backgroundColor = c;
12}
13
14dispbk(3);