更新日 98/06/03

背景の色を徐々に変える


Webページをちょっとかっこよくするための軽くて、お手軽な小技を研究するページです。

このページはリンクフリーです。どのページにでもリンクを張ってもらって結構です。


JavaScriptを使って、背景の色を徐々に変えるページを作ってみましょう。(ちょっと、ちらつきますが...)
次のサンプルを <HEAD> と </HEAD> の間に入れます。

----サンプル 開始----
<HEAD>

...

<SCRIPT Language="JavaScript">
<!--
var rclr = 0;
var gclr = 0;
var bclr = 0;
var rmax = 0xc0;
var gmax = 0xff;
var bmax = 0xc0;
var count = 0
var max = 50;
function getHex(dec)
{
  var s = "0123456789abcdef";
  var hex;
  hex = s.charAt(dec >> 4);
  hex = hex + s.charAt(dec % 16);
  return (hex);
}
function chgColor()
{
  document.bgColor = "#" + getHex(parseInt(rclr)) + getHex(parseInt(gclr)) + getHex(parseInt(bclr));
  if (count < max) {
    count ++;
    rclr += rmax / max;
    gclr += gmax / max;
    bclr += bmax / max;
    timer = setTimeout("chgColor()",10);
  }
}
// -->
</SCRIPT>

...

</HEAD>
----サンプル 終了----


次のサンプルを </HEAD>後のどこかに入れます。

----サンプル 開始----
<BODY onLoad="chgColor()">
----サンプル 終了----

var rmax = 0xc0; この値を変えると最終的なR(赤)の色を変えられます。
var gmax = 0xff; この値を変えると最終的なG(緑)の色を変えられます。
var bmax = 0xc0; この値を変えると最終的なB(青)の色を変えられます。
var max = 50; この値を変えると最終的な色への変化の時間を変えられます。



HOMEへ
夫婦で楽しむRPGお勧め度チェック あ〜んど 座談会
もう1つのなりてんのページへ

なりてんへのメールその1 なりてんへのメールその2