ブロッコリーを克服するまでプログラミング

プログラミングとか趣味とかを報告します。

Javascript: いくつかの文字列を順次表示させる（フェードイン・フェードアウト)

プログラミング Javascript
やるべきことはあるけれども、いろいろなことを放り投げて、Javascriptで遊んでみました。テーマは、「いくつかの文字列をフェードイン・アウトさせて順次表示させる」です。
 
正直、Javascriptは初心者なので（だいたいの技術が初心者のへっぽこ）やはりまずはググってみました。すると、フェードイン・アウトの良い関数が転がっていました。下記URLの「.style.color = "#"+c+c+c+c+c+c;」というくだり、天才かと思いました。
 
 上記関数をほぼパクリ、Javascriptで3つのメッセージをフェードイン・アウトさせてみました。fadeMsg(
"012") でfadeMsg()関数を呼び出すと、関数内では指定されたIDに対して #000000 → #1111111 → #2222222 の順で色を変更します。なので、fadeMsg('0123456789abcdef')とすると黒 → 白 へと色が変わっていくのです。この発想、すごすぎです。（普通だったらすんません）
 
※Javascriptしか記述していませんが、使い方は<body>タグ内に<div id = "viewMsg"></div>を追加するだけです。
 
Javascript
<script type="text/javascript" >
 var cnt = 0;
 var arrayMsg = new Array();
 window.onload = function(){ 
  arrayMsg.push("msg no.1"); // メッセージ1を格納
  arrayMsg.push("msg no.2"); // メッセージ2を格納
  arrayMsg.push("mag no.3"); // メッセージ3を格納
  viewMsg(); //viewMsg()を呼びだし
 }
 
 function viewMsg(){
 var interval = 3000;  // 次のメッセージに移行するまでの時間
 if(0 < arrayMsg.length){
  document.getElementById("viewMsg").innerHTML = arrayMsg[0];
  arrayMsg.shift(); // 読み込んだ文字列は抹消
  fadeMsg("fedcba9876543210123456789abcdef"); // フェードイン → アウト
  
  if(0 < arrayMsg.length)
   setTimeout("viewMsg('" + arrayMsg + "')", interval); // interval ms後に再帰
  }
 };
 
 function fadeMsg(str){ 
  var itv;
  var c = str.charAt(cnt++);
 
  if(c == '0')
   itv = 1000;  // #000000(黒)の時だけインターバルを長く設定
  else
   itv = 10;  // #000000以外の時はインターバルを短く設定
 
 document.getElementById("viewMsg").style.color = "#"+c+c+c+c+c+c;
 if(cnt < str.length)
  setTimeout("fadeMsg('" + str + "')", itv);
 if(cnt == str.length)
  cnt = 0;
 };
 </script>