1ビット増えるとパターンは2倍

まず[1ビット]ボタンをクリック、その後[2ビット]、[3ビット]、...と進んでください。

0
1

00
01
10
11

000
001
010
011
100
101
110
111

0000
0001
0010
0011
0100
0101
0110
0111
1000
1001
1010
1011
1100
1101
1110
1111

00000
00001
00010
00011
00100
00101
00110
00111
01000
01001
01010
01011
01100
01101
01110
01111
10000
10001
10010
10011
10100
10101
10110
10111
11000
11001
11010
11011
11100
11101
11110
11111

制作意図

組み合わせのパターンは全部を自分で書き出すことで、簡単に理解できるものですが、どうも頭の中だけで考えてしまう人が多いようです。ならば、アニメーションをつかって書き方を示してやろうと考えたわけです。

表の要素を増やす仕組み

tableは2行5列で変わりませんが、内容を表示 する/しない を切り替えます。

button id=bb1
1ビット 

button id=bb2
2ビット 

button id=bb3
3ビット 

button id=bb4
4ビット 

button id=bb5
5ビット 

p      id=b1
00
01

p      id=b2
00
01
10
11

p      id=b3
000
001
010
011
100
101
...

p      id=b4
0000
0001
0010
0011
0100
0101
....

p      id=b5
00000
00001
00010
00011
00100
00101
.....

全体の構造がtableで各td(セル)にはbutton要素とp要素が入っていて、それぞれidがついています。

idにより対象を変数で呼べるようにします。たとえばid=b2ならば、

tdb2 = document.getElementById("b2");

これを表示しないようにするには、

tdb2.setAttribute("style","display:none;");

再び表示するには

tdb2.setAttribute("style","display:block;");

p要素でなくbutton要素なら、blockよりもinlineがいいでしょう。

btnb2.setAttribute("style","display:inline;");

各ビットのアニメーション

書かれている内容はそのままに、文字の色を変えます。白にすると見えなくなります。

2ビットの欄を例に考えてみます。動作開始前をstate0として、state4までの状態があります。

state0 state1 state2 state3 state4

00
01
10
11

 ⇨

00
01
10
11

 ⇨

00
01
10
11

 ⇨

00
01
10
11

 ⇨

00
01
10
11

status1に見えている 01 は、ずっと黒です。これを c1 とします

部分\状態 state0 state1 state2 state3 state4
c1 黒 黒 黒 黒 黒

赤い 0 は次のように色が変化します。これを o とします。0 からの連想です。

部分\状態 state0 state1 state2 state3 state4
o 黒 白 赤 赤 赤

status3で見えてくる 01 は、ずっと黒です。次のように色が変化します。c2 とします。

部分\状態 state0 state1 state2 state3 state4
c2 黒 白 白 黒 黒

青い 1 は次のように色が変化します。これを l とします。1 からの連想です。

部分\状態 state0 state1 state2 state3 state4
l 黒 白 白 白 青

そこで、cssに次のように設定します。

.state0 .c1{color:#000;}
.state0 .c2{color:#000;}
.state0 .o {color:#000;}
.state0 .l {color:#000;}

.state1 .c1{color:#000;}
.state1 .c2{color:#fff;}
.state1 .o {color:#fff;}
.state1 .l {color:#fff;}

.state2 .c1{color:#000;}
.state2 .c2{color:#fff;}
.state2 .o {color:#f00;}
.state2 .l {color:#fff;}

.state3 .c1{color:#000;}
.state3 .c2{color:#000;}
.state3 .o {color:#f00;}
.state3 .l {color:#fff;}

.state4 .c1{color:#000;}
.state4 .c2{color:#000;}
.state4 .o {color:#f00;}
.state4 .l {color:#06f;}

この指定を説明すると、例えば、.state2 .o {color:#f00;} は、class=state2 の子要素が class=o であれば文字色は赤ということです。(子だけではなく、孫でもよいので、正確には子孫です)

色を換えたい文字列にspanなどのタグをつけ、 c1,c2,o,l とclass分けしておきます。これが子要素になります。

クラス分けした要素の親要素をclass=status0としておき、この親要素のclassだけをjavascriptで1秒毎に変更していきます。

以下が、2ビットのアニメーションの主要部分です。ボタンのクリックで、ac2()に来ます。2ビットの部分を表示したあと、classをstate1にして setTimeout()します。これは1秒(1000ミリ秒)後にac2b()を呼び出します。ac2b()はstatus2 に変更したあと、setTimeout()します。これは1秒(1000ミリ秒)後にac2c()を呼び出します。こうして1秒毎に遷移していきます。

javascriptの一部

function ac2(){
    tdb2.setAttribute("style","display:block;");
    tdb2.setAttribute("class","state1");
    setTimeout("ac2b()",1000);
}
function ac2b(){
    tdb2.setAttribute("class","state2");
    setTimeout("ac2c()",1000);
}
function ac2c(){
    tdb2.setAttribute("class","state3");
    setTimeout("ac2d()",1000);
}
function ac2d(){
    tdb2.setAttribute("class","state4");
}

javascriptの全体

window.onload = function(){
   btnb3 = document.getElementById("bb3");
   btnb4 = document.getElementById("bb4");
   btnb5 = document.getElementById("bb5");
   tdb2 = document.getElementById("b2");
   tdb3 = document.getElementById("b3");
   tdb4 = document.getElementById("b4");
   tdb5 = document.getElementById("b5");
}
function ac1(){
    btnb3.setAttribute("style","display:none;");
    btnb4.setAttribute("style","display:none;");
    btnb5.setAttribute("style","display:none;");
    tdb2.setAttribute("style","display:none;");
    tdb3.setAttribute("style","display:none;");
    tdb4.setAttribute("style","display:none;");
    tdb5.setAttribute("style","display:none;");
}

function ac2(){
    btnb3.setAttribute("style","display:none;");
    btnb4.setAttribute("style","display:none;");
    btnb5.setAttribute("style","display:none;");
    tdb2.setAttribute("style","display:block;");
    tdb2.setAttribute("class","state1");
    tdb3.setAttribute("style","display:none;");
    tdb4.setAttribute("style","display:none;");
    tdb5.setAttribute("style","display:none;");
    setTimeout("ac2b()",1000);
}
function ac2b(){
    tdb2.setAttribute("class","state2");
    setTimeout("ac2c()",1000);
}
function ac2c(){
    tdb2.setAttribute("class","state3");
    setTimeout("ac2d()",1000);
}
function ac2d(){
    tdb2.setAttribute("class","state4");
    btnb3.setAttribute("style","display:inline;");
}

function ac3(){
    btnb4.setAttribute("style","display:none;");
    btnb5.setAttribute("style","display:none;");
    tdb2.setAttribute("class","state0");
    tdb3.setAttribute("style","display:block;");
    tdb3.setAttribute("class","state1");
    tdb4.setAttribute("style","display:none;");
    tdb5.setAttribute("style","display:none;");
    setTimeout("ac3b()",1000);
}
function ac3b(){
    tdb3.setAttribute("class","state2");
    setTimeout("ac3c()",1000);
}
function ac3c(){
    tdb3.setAttribute("class","state3");
    setTimeout("ac3d()",1000);
}
function ac3d(){
    tdb3.setAttribute("class","state4");
    btnb4.setAttribute("style","display:inline;");
}

function ac4(){
    btnb5.setAttribute("style","display:none;");
    tdb2.setAttribute("class","state0");
    tdb3.setAttribute("class","state0");
    tdb4.setAttribute("style","display:block;");
    tdb4.setAttribute("class","state1");
    tdb5.setAttribute("style","display:none;");
    setTimeout("ac4b()",1000);
}
function ac4b(){
    tdb4.setAttribute("class","state2");
    setTimeout("ac4c()",1000);
}
function ac4c(){
    tdb4.setAttribute("class","state3");
    setTimeout("ac4d()",1000);
}
function ac4d(){
    tdb4.setAttribute("class","state4");
    btnb5.setAttribute("style","display:inline");
}

function ac5(){
    tdb2.setAttribute("class","state0");
    tdb3.setAttribute("class","state0");
    tdb4.setAttribute("class","state0");
    tdb5.setAttribute("style","display:block;");
    tdb5.setAttribute("class","state1");
    setTimeout("ac5b()",1000);
}
function ac5b(){
    tdb5.setAttribute("class","state2");
    setTimeout("ac5c()",1000);
}
function ac5c(){
    tdb5.setAttribute("class","state3");
    setTimeout("ac5d()",1000);
}
function ac5d(){
    tdb5.setAttribute("class","state4");
}

html

<table class="bits">
<tr>
<td><button type="button" id="bb1" onclick="ac1()">1ビット</button></td>
<td><button type="button" id="bb2" onclick="ac2()">2ビット</button></td>
<td><button type="button" id="bb3" onclick="ac3()">3ビット</button></td>
<td><button type="button" id="bb4" onclick="ac4()">4ビット</button></td>
<td><button type="button" id="bb5" onclick="ac5()">5ビット</button></td>
</tr>
<tr>
<td><p>
0<br>
1<br>
</p></td>
<td><p id="b2">
<span class="o">0</span><span class="c1">0</span><br>
<span class="o">0</span><span class="c1">1</span><br>
<span class="l">1</span><span class="c2">0</span><br>
<span class="l">1</span><span class="c2">1</span><br>
</p></td>
<td><p id="b3">
<span class="o">0</span><span class="c1">00</span><br>
<span class="o">0</span><span class="c1">01</span><br>
<span class="o">0</span><span class="c1">10</span><br>
<span class="o">0</span><span class="c1">11</span><br>
<span class="l">1</span><span class="c2">00</span><br>
<span class="l">1</span><span class="c2">01</span><br>
<span class="l">1</span><span class="c2">10</span><br>
<span class="l">1</span><span class="c2">11</span><br>
</p></td>
<td><p id="b4">
<span class="o">0</span><span class="c1">000</span><br>
<span class="o">0</span><span class="c1">001</span><br>
<span class="o">0</span><span class="c1">010</span><br>
<span class="o">0</span><span class="c1">011</span><br>
<span class="o">0</span><span class="c1">100</span><br>
<span class="o">0</span><span class="c1">101</span><br>
<span class="o">0</span><span class="c1">110</span><br>
<span class="o">0</span><span class="c1">111</span><br>
<span class="l">1</span><span class="c2">000</span><br>
<span class="l">1</span><span class="c2">001</span><br>
<span class="l">1</span><span class="c2">010</span><br>
<span class="l">1</span><span class="c2">011</span><br>
<span class="l">1</span><span class="c2">100</span><br>
<span class="l">1</span><span class="c2">101</span><br>
<span class="l">1</span><span class="c2">110</span><br>
<span class="l">1</span><span class="c2">111</span><br>
</p></td>
<td><p id="b5">
<span class="o">0</span><span class="c1">0000</span><br>
<span class="o">0</span><span class="c1">0001</span><br>
<span class="o">0</span><span class="c1">0010</span><br>
<span class="o">0</span><span class="c1">0011</span><br>
<span class="o">0</span><span class="c1">0100</span><br>
<span class="o">0</span><span class="c1">0101</span><br>
<span class="o">0</span><span class="c1">0110</span><br>
<span class="o">0</span><span class="c1">0111</span><br>
<span class="o">0</span><span class="c1">1000</span><br>
<span class="o">0</span><span class="c1">1001</span><br>
<span class="o">0</span><span class="c1">1010</span><br>
<span class="o">0</span><span class="c1">1011</span><br>
<span class="o">0</span><span class="c1">1100</span><br>
<span class="o">0</span><span class="c1">1101</span><br>
<span class="o">0</span><span class="c1">1110</span><br>
<span class="o">0</span><span class="c1">1111</span><br>
<span class="l">1</span><span class="c2">0000</span><br>
<span class="l">1</span><span class="c2">0001</span><br>
<span class="l">1</span><span class="c2">0010</span><br>
<span class="l">1</span><span class="c2">0011</span><br>
<span class="l">1</span><span class="c2">0100</span><br>
<span class="l">1</span><span class="c2">0101</span><br>
<span class="l">1</span><span class="c2">0110</span><br>
<span class="l">1</span><span class="c2">0111</span><br>
<span class="l">1</span><span class="c2">1000</span><br>
<span class="l">1</span><span class="c2">1001</span><br>
<span class="l">1</span><span class="c2">1010</span><br>
<span class="l">1</span><span class="c2">1011</span><br>
<span class="l">1</span><span class="c2">1100</span><br>
<span class="l">1</span><span class="c2">1101</span><br>
<span class="l">1</span><span class="c2">1110</span><br>
<span class="l">1</span><span class="c2">1111</span><br>
</p></td>
</tr>
</table>

css

table.bits{
  border:none;
}
table.bits td {
  border:none;
  vertical-align:top;
}
table.bits td p{
  text-align:right;
}
.state0 .c1{  color:#000;}
.state0 .c2{  color:#000;}
.state0 .o {  color:#000;}
.state0 .l {  color:#000;}
.state1 .c1{  color:#000;}
.state1 .c2{  color:#fff;}
.state1 .o {  color:#fff;}
.state1 .l {  color:#fff;}
.state2 .c1{  color:#000;}
.state2 .c2{  color:#fff;}
.state2 .o {  color:#f00;}
.state2 .l {  color:#fff;}
.state3 .c1{  color:#000;}
.state3 .c2{  color:#000;}
.state3 .o {  color:#f00;}
.state3 .l {  color:#fff;}
.state4 .c1{  color:#000;}
.state4 .c2{  color:#000;}
.state4 .o {  color:#f00;}
.state4 .l {  color:#06f;}