graphics anaimation with class and sleep function

Creates an input button and assigns a click event to it.

by fxa76

HTML

<input type="button" id="button" value="Click Me" />
<div id="myDiv" width="100%" height="100%">
        <div class="redSquare" id="0"></div>
        <div class="redSquare" id="1"></div>
        <div class="redSquare" id="2"></div>
        <div class="redSquare" id="3"></div>
        <div class="redSquare" id="4"></div>
        <div class="redSquare" id="5"></div>
        <div class="redSquare" id="6"></div>
      </div>

CSS

div.redSquare{
   width:10px; height:10px; background-color :#FF0000; display: inline-block ;float: none;
}
div.blueSquare{
   width:10px; height:10px; background-color :#0000FF; display: inline-block ;float: none;
}

JavaScript

var onClick = function() {
    alert('Hi');
    for(var i = 0; i < 9 ; i++ ){
     document.getElementById(i).setAttribute("class","blueSquare" );
     sleep(500);
  }
};

$('#button').click(onClick);

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}