radix_converter_03_3.html

<html>
<head>
<title> Radix Converter </title>
<script>
 var M = 0;
 var p2 = [1, 2, 4, 8, 16, 32, 64, 128];

 function con_radix(num,radix){return (num<1)?"0":to_radix(num,radix);}
 function to_radix(num,radix){
 return(num>=1)?to_radix(Math.floor(num/radix),radix)+"0123456789ABCDEF".charAt(num%radix):"";
 }

 function zpad(num,num_zeros){return (num.length>=num_zeros)?num:("00000000" + num).slice(-num_zeros);}

 function flip(p){M=M^p2[p];display(M);}

 function dobits(bits){
 for (i=0; i<8; i++) {
 q=((bits&p2[i])==0)?"#ffffff":"#000000";
 switch (i) {
 case 0:b0.style.backgroundColor=q; break;
 case 1:b1.style.backgroundColor=q; break;
 case 2:b2.style.backgroundColor=q; break;
 case 3:b3.style.backgroundColor=q; break;
 case 4:b4.style.backgroundColor=q; break;
 case 5:b5.style.backgroundColor=q; break;
 case 6:b6.style.backgroundColor=q; break;
 case 7:b7.style.backgroundColor=q; break;
 }
 }
 }

 function ev(num,radix){M = parseInt(num,radix); display (M);}

 function display(M){
  dobits(M);
  fm.d.value = con_radix(M,10);
  fm.h.value = zpad(con_radix(M,16),2);
  fm.b.value = zpad(con_radix(M,2),8);
  fm.t.value = con_radix(M,3);
  fm.q.value = con_radix(M,5);
  fm.o.value = con_radix(M,8);
 }
</script>
</head>


<body>

<p>&nbsp;</p>

<style>
.c1{border:1px solid black; width:15px; height:24px; text-align:center;}
.c2{border:1px solid grey; width:15px; height:24px; background-color:#ffffff;}
</style>

<table border=0 align=center bgcolor="#E4E4E4">
  <tr>
    <td align="center">

      <table style="border-collapse:collapse;">
        <tr align="center" bgcolor="#FFFFCC">
          <td class="c1">7</td>
          <td class="c1">6</td>
          <td class="c1">5</td>
          <td class="c1">4</td>
          <td class="c1">3</td>
          <td class="c1">2</td>
          <td class="c1">1</td>
          <td class="c1">0</td>
        </tr>

        <tr align="center">
          <td id="b7" class="c2" onclick="flip(7)">&nbsp;</td>
          <td id="b6" class="c2" onclick="flip(6)">&nbsp;</td>
          <td id="b5" class="c2" onclick="flip(5)">&nbsp;</td>
          <td id="b4" class="c2" onclick="flip(4)">&nbsp;</td>
          <td id="b3" class="c2" onclick="flip(3)">&nbsp;</td>
          <td id="b2" class="c2" onclick="flip(2)">&nbsp;</td>
          <td id="b1" class="c2" onclick="flip(1)">&nbsp;</td>
          <td id="b0" class="c2" onclick="flip(0)">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <td align="center">
      <table>
        <form id="fm" method="post">
        <tr>
          <td align=right><p>Decimal:</p></td>
          <td><input id="d" value="0" onchange="ev(this.value,10)" size=11></td>
        </tr>
        <tr>
          <td align=right><p>Hexadecimal:</p></td>
          <td><input id="h" value="0" onchange="ev(this.value,16)" size=8></td>
        </tr>
        <tr>
          <td align=right><p>Binary:</p></td>
          <td><input id="b" value="0" onchange="ev(this.value,2)" size=27></td>
        </tr>
        <tr>
          <td align=right><p>Ternary:</p></td>
          <td><input id="t" value="0" onchange="ev(this.value,3)" size=21></td>
        </tr>
        <tr>
          <td align=right><p>Quintal:</p></td>
          <td><input id="q" value="0" onchange="ev(this.value,5)" size=16></td>
        </tr>
        <tr>
          <td align=right><p>Octal:</p></td>
          <td><input id="o" value="0" onchange="ev(this.value,8)" size=12></td>
        </tr>
        </form>
      </table>

    </td>
  </tr>
</table>

</body>
</html>