Binary counting demo

jsFiddle demo hosted on Gist author(s): Michel Daviot

HTML

<input type="submit" onClick="plusOne()" value="+1"/>
<input type="submit" onClick="minusOne()" value="-1"/>
<input type="submit" onClick="reset()" value="reset"/>
<table width="200" border="0" align="center">
   <tbody  style="display:flex"><tr>
    <td><img src="on.png" name="C1" width="50" height="50" id="C1" alt=""></td>
    <td><img src="on.png" name="C2" width="50" height="50" id="C2" alt=""></td>
    <td><img src="on.png" name="C3" width="50" height="50" id="C3" alt=""></td>
    <td><img src="off.png" name="C4" width="50" height="50" id="C4" alt=""></td>
  </tr>
   <tr>
    <td><img src="off.png" name="C5" width="50" height="50" id="C5" alt=""></td>
    <td><img src="on.png" name="C6" width="50" height="50" id="C6" alt=""></td>
    <td><img src="on.png" name="C7" width="50" height="50" id="C7" alt=""></td>
    <td><img src="off.png" name="C8" width="50" height="50" id="C8" alt=""></td>
  </tr>
   <tr>
    <td><img src="on.png" name="C9" width="50" height="50" id="C9" alt=""></td>
    <td><img src="off.png" name="C10" width="50" height="50" id="C10" alt=""></td>
    <td><img src="off.png" name="C11" width="50" height="50" id="C11" alt=""></td>
    <td><img src="off.png" name="C12" width="50" height="50" id="C12" alt=""></td>
  </tr>
   <tr>
    <td><img src="off.png" name="C13" width="50" height="50" id="C13" alt=""></td>
    <td><img src="off.png" name="C14" width="50" height="50" id="C14" alt=""></td>
    <td><img src="on.png" name="C15" width="50" height="50" id="C15" alt=""></td>
    <td><img src="on.png" name="C16" width="50" height="50" id="C16" alt=""></td>
  </tr>
</tbody></table>

<script language="javascript"> reset();</script>

JavaScript

function updateClock() {
  setTimeout("binaryize()", 82);
}

function binaryize() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var milli = now.getMilliseconds();
  
  var fract = hours / 24 + minutes / 1440 + seconds / 86400 + milli / 86400000;
  display(fract);
  updateClock();
}

var num=0;

function plusOne() {
  num ++;
  display(num);
}

function minusOne() {
  num --;
  display(num);
}

function reset() {
  num =0;
  display(num);
}



function display(n) {
  var number=n;
  with(Math) {
    for (i = 16; i >= 1; i--) {
      var p=16-i;      
      var j = number%2;
      var img = document.getElementById("C" + i);
      if (j > 0) {
        img.src = 'http://www.abulsme.com/binarytime/on.png';
      } else {
        img.src = 'http://www.abulsme.com/binarytime/off.png';
      }
      number = floor(number/2);
    }
  }

}