読者です 読者をやめる 読者になる 読者になる

久保清隆のブログ

ライフハック、健康、旅行など、役立つ情報を書きます。

JavaScriptで背景を時間ごとに変えるプログラムを作った

JavaScriptで背景の色や文字の色を時間によって変えたり、
背景の画像を一定時間ごとに変えるプログラムを書いた。

使った主なメソッドをまず簡単に説明する。

eval(s)          :sという文字列を数値に変換する。
charAt(i)         :文字列の中のi番目の文字を返す。
document.fgColor="#aaaaaa":文字の色を指定する
document.bgColor="#ffffff":背景の色を指定する。
document.body.background = "画像のURL":URLにある画像ファイルを背景に設定する。
setTimeout("関数",ミリ秒) :一定時間(ミリ秒)後に命令(関数)を呼び出すタイマーを設定する。


以下のコードを拡張子をhtmlで保存してブラウザで開くと実際に動作すると思う。

<html>
<title>CLOCK</title>
<head>
<script language="JavaScript">
function clock(){
  c = new Date();
  h = c.getHours();
  m = c.getMinutes();
  s = c.getSeconds();
  document.clockForm.digitalClock.value=h+":"+m+":"+s;

  color_set="0123456789abcdef"
  if(eval(s) < 16){
    i = eval(s);
    c=color_set.charAt(i);
    d=color_set.charAt(15-i);
    document.fgColor="#"+d+d+"00"+c+c;
    document.body.background = "";
    document.bgColor="#"+c+c+"00"+d+d;
  }else if(eval(s) < 20){
    document.fgColor="#ffffff";
    document.body.background = "http://f.hatena.ne.jp/images/fotolife/k/kiyo560808/20090211/20090211211001.jpg";
  }else if(eval(s) < 28){
    document.fgColor="#aaaaaa";
    document.body.background = "http://f.hatena.ne.jp/images/fotolife/k/kiyo560808/20090211/20090211210958.jpg";
  }else if(eval(s) < 36){
    document.fgColor="#aaaaaa";
    document.body.background = "http://f.hatena.ne.jp/images/fotolife/k/kiyo560808/20090211/20090211210954.jpg";
  }else if(eval(s) < 45){
    document.fgColor="#aaaaaa";
    document.body.background = "http://f.hatena.ne.jp/images/fotolife/k/kiyo560808/20090211/20090211211000.jpg";
  }else if(eval(s) < 52){
    document.fgColor="#aaaaaa";
    document.body.background = "http://f.hatena.ne.jp/images/fotolife/k/kiyo560808/20090211/20090211210953.jpg";
  }else{
    document.fgColor="#ffff00";
    document.body.background = "http://f.hatena.ne.jp/images/fotolife/k/kiyo560808/20090211/20090211211921.jpg";
  }
  setTimeout("clock()",500);
}
</script>
</head>

<body>
  <center><h2><b>CLOCK</b></h2></center>
  <form name="clockForm">Current Time:
  <input size="10" name="digitalClock">
  </form>

  <script language="javascript">
  //<![CDATA[
    clock();
  //]]>
  </script>
</body>
</html>



お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。
ブログランキング・にほんブログ村へにほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ プログラム・プログラマへ