演奏会用アプリの中で一番力を入れた血圧計のコード

突っ込みどころ満載だと思いますが。。。

<div style="font-size: 20pt;font-weight: bold;color:white; font-family: 'ＭＳ ゴシック';"> 血圧計 </div>

<img id="sign" src="black.jpg"  height=100 style="background-color: black;">
<table id="blocks" style="margin:10px" align="center">
  <tr style="padding: 2px;" height=36><td width=70></td><td><img id="level8" src="black.jpg"></td><td></td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level7" src="black.jpg"></td><td></td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level6" src="black.jpg"></td><td></td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level5" src="black.jpg"></td><td style="font-size: 14pt;font-weight: bold; color:white ;">150mmHg</td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level4" src="black.jpg"></td><td></td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level3" src="black.jpg"></td><td></td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level2" src="b_blue.jpg"></td><td></td></tr>
  <tr style="padding: 2px;" height=36><td></td><td><img id="level1" src="b_blue.jpg"></td><td></td></tr>
</table>
<div id="start_button" align="right" style="margin: 10px;float:right "><button onclick="execute()">計測開始</button></div>

function hide_all_block(){
  for(i=3; i <= 8; i++){
    document.getElementById("level"+String(i)).setAttribute("src", "black.jpg");
  }
  document.getElementById("sign").setAttribute("src", "black.jpg");
}

function show_block(level){
  switch (level) {
    case 3:
    case 4:
    case 5:
     document.getElementById("level"+String(level)).setAttribute("src", "b_blue.jpg");
     break;
    default:
     document.getElementById("level"+String(level)).setAttribute("src", "b_red.jpg");
     break;
  }
}

function show_warning(){
  document.getElementById("sign").setAttribute("src", "b_warning.jpg");
}

function show_danger(){
  document.getElementById("sign").setAttribute("src", "b_danger.jpg");
}

function show_blocks(level){
  hide_all_block();
  for(i=3; i <= level; i++){
    show_block(i);
  }
  switch (level) {
    case 6:
    case 7:
     show_warning();
     break;
    case 8:
     show_danger();
     break;
    default:
     break;
  }
}

function execute_sample_1min_interval(){
//ちょっと試す場合
 setTimeout("show_blocks(4)",1000);
 setTimeout("show_blocks(5)",3000);
 setTimeout("show_blocks(6)",5000);
 setTimeout("show_blocks(7)",6000);
 setTimeout("show_blocks(8)",9000);
 setTimeout("show_blocks(7)",11000);
 setTimeout("show_blocks(5)",14000);
}

function execute_10sec_interval(){
//当初想定10秒間隔のパターン
 setTimeout("show_blocks(2)",5000);
 setTimeout("show_blocks(3)",10000);
 setTimeout("show_blocks(3)",20000);
 setTimeout("show_blocks(3)",30000);
 setTimeout("show_blocks(4)",40000);
 setTimeout("show_blocks(5)",50000);
 setTimeout("show_blocks(5)",60000);
 setTimeout("show_blocks(5)",70000);
 setTimeout("show_blocks(5)",80000);
 setTimeout("show_blocks(4)",90000);
 setTimeout("show_blocks(4)",100000);
 setTimeout("show_blocks(3)",110000);
 setTimeout("show_blocks(3)",120000);
 setTimeout("show_blocks(3)",130000);
 setTimeout("show_blocks(4)",140000);
 setTimeout("show_blocks(4)",150000);
 setTimeout("show_blocks(4)",160000);
 setTimeout("show_blocks(5)",170000);
 setTimeout("show_blocks(6)",180000);
 setTimeout("show_blocks(6)",190000);
 setTimeout("show_blocks(7)",200000);
 setTimeout("show_blocks(7)",210000);
 setTimeout("show_blocks(8)",220000);
 setTimeout("show_blocks(7)",230000);
 setTimeout("show_blocks(7)",240000);
 setTimeout("show_blocks(6)",250000);
 setTimeout("show_blocks(5)",260000);
 setTimeout("show_blocks(5)",270000);
 setTimeout("show_blocks(5)",280000);
 setTimeout("show_blocks(4)",290000);
 setTimeout("show_blocks(5)",300000);
 setTimeout("show_blocks(6)",310000);
 setTimeout("show_blocks(7)",320000);
}

function test1_1(){
//10秒間隔が3⇒4⇒5とあがるパターン
//1秒間隔⇒30回変化
//⇒ちょっとせわしなさすぎ
 setTimeout("show_blocks(3)",4000);
 setTimeout("show_blocks(2)",5000);
 setTimeout("show_blocks(3)",6000);
 setTimeout("show_blocks(4)",7000);
 setTimeout("show_blocks(3)",8000);
 setTimeout("show_blocks(2)",9000);
 setTimeout("show_blocks(3)",10000);
 setTimeout("show_blocks(2)",11000);
 setTimeout("show_blocks(3)",12000);
 setTimeout("show_blocks(4)",13000);
 setTimeout("show_blocks(3)",14000);
 setTimeout("show_blocks(4)",15000);
 setTimeout("show_blocks(3)",16000);
 setTimeout("show_blocks(4)",17000);
 setTimeout("show_blocks(3)",18000);
 setTimeout("show_blocks(4)",19000);
 setTimeout("show_blocks(3)",20000);
 setTimeout("show_blocks(4)",21000);
 setTimeout("show_blocks(5)",22000);
 setTimeout("show_blocks(4)",23000);
 setTimeout("show_blocks(5)",24000);
 setTimeout("show_blocks(4)",25000);
 setTimeout("show_blocks(5)",26000);
 setTimeout("show_blocks(4)",27000);
 setTimeout("show_blocks(3)",28000);
 setTimeout("show_blocks(4)",29000);
 setTimeout("show_blocks(5)",30000);
 setTimeout("show_blocks(4)",31000);
 setTimeout("show_blocks(5)",32000);
 setTimeout("show_blocks(5)",33000);
}

function test1_2(){
//10秒間隔が3⇒4⇒5とあがるパターン
//2秒間隔⇒15回変化
//⇒よさげ？
 setTimeout("show_blocks(3)",5000);
 setTimeout("show_blocks(2)",7000);
 setTimeout("show_blocks(3)",9000);
 setTimeout("show_blocks(2)",11000);
 setTimeout("show_blocks(3)",13000);
 setTimeout("show_blocks(4)",15000);
 setTimeout("show_blocks(3)",17000);
 setTimeout("show_blocks(4)",19000);
 setTimeout("show_blocks(3)",21000);
 setTimeout("show_blocks(4)",23000);
 setTimeout("show_blocks(5)",25000);
 setTimeout("show_blocks(4)",27000);
 setTimeout("show_blocks(5)",29000);
 setTimeout("show_blocks(4)",31000);
 setTimeout("show_blocks(5)",33000);

}

function test1_3(){
//10秒間隔が3⇒4⇒5とあがるパターン
//5秒間隔 ⇒6回変化
//⇒ちょっと微妙かな
 setTimeout("show_blocks(3)",8000);
 setTimeout("show_blocks(2)",13000);
 setTimeout("show_blocks(3)",18000);
 setTimeout("show_blocks(4)",23000);
 setTimeout("show_blocks(3)",28000);
 setTimeout("show_blocks(5)",33000);
}

function test2_1(){
//10秒間隔が6⇒6⇒6と一定パターン
//1秒間隔⇒30回変化
//⇒せわしない
 setTimeout("show_blocks(6)",4000);
 setTimeout("show_blocks(5)",5000);
 setTimeout("show_blocks(6)",6000);
 setTimeout("show_blocks(5)",7000);
 setTimeout("show_blocks(6)",8000);
 setTimeout("show_blocks(5)",9000);
 setTimeout("show_blocks(6)",10000);
 setTimeout("show_blocks(7)",11000);
 setTimeout("show_blocks(6)",12000);
 setTimeout("show_blocks(7)",13000);
 setTimeout("show_blocks(6)",14000);
 setTimeout("show_blocks(7)",15000);
 setTimeout("show_blocks(6)",16000);
 setTimeout("show_blocks(5)",17000);
 setTimeout("show_blocks(6)",18000);
 setTimeout("show_blocks(7)",19000);
 setTimeout("show_blocks(6)",20000);
 setTimeout("show_blocks(5)",21000);
 setTimeout("show_blocks(6)",22000);
 setTimeout("show_blocks(7)",23000);
 setTimeout("show_blocks(6)",24000);
 setTimeout("show_blocks(5)",25000);
 setTimeout("show_blocks(6)",26000);
 setTimeout("show_blocks(7)",27000);
 setTimeout("show_blocks(6)",28000);
 setTimeout("show_blocks(5)",29000);
 setTimeout("show_blocks(7)",30000);
 setTimeout("show_blocks(6)",31000);
 setTimeout("show_blocks(5)",32000);
 setTimeout("show_blocks(6)",33000);
}

function test2_2(){
//10秒間隔が6⇒6⇒6と一定パターン
//2秒間隔⇒15回変化
//⇒まぁまぁ
 setTimeout("show_blocks(6)",5000);
 setTimeout("show_blocks(5)",7000);
 setTimeout("show_blocks(6)",9000);
 setTimeout("show_blocks(5)",11000);
 setTimeout("show_blocks(6)",13000);
 setTimeout("show_blocks(7)",15000);
 setTimeout("show_blocks(6)",17000);
 setTimeout("show_blocks(7)",19000);
 setTimeout("show_blocks(6)",21000);
 setTimeout("show_blocks(5)",23000);
 setTimeout("show_blocks(6)",25000);
 setTimeout("show_blocks(7)",27000);
 setTimeout("show_blocks(6)",29000);
 setTimeout("show_blocks(5)",31000);
 setTimeout("show_blocks(6)",33000);
}

function test2_3(){
//10秒間隔が6⇒6⇒6と一定パターン
//5秒間隔 ⇒6回変化
//⇒おそい
 setTimeout("show_blocks(5)",8000);
 setTimeout("show_blocks(6)",13000);
 setTimeout("show_blocks(7)",18000);
 setTimeout("show_blocks(6)",23000);
 setTimeout("show_blocks(5)",28000);
 setTimeout("show_blocks(6)",33000);
}


function execute(){
   document.getElementById("start_button").style.display = 'none';

 execute_sample_1min_interval()
 //execute_10sec_interval()
 //test1_1()
 //test1_2()
 //test1_3()
 //test2_1()
 //test2_2()
 //test2_3()
}

実際、赤や青のバー(背景色黒)とか、
Danger！とかWarningの画像を作るというのが
意外と大変だったりもしました。
あとは曲にあわせて時間を微調整するのとか。