JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<h1></h1>

<div id='num1'>1</div>
<div id='num2'>2</div>
<div id='num3'>3</div>
<div id='num4'>4</div>
<div id='num5'>5</div>
<div id='num6'>6</div>
<div id='num7'>7</div>
<div id='num8'>8</div>
<div id='num9'>9</div>
<div id='num10'>10</div>
<div id='num11'>11</div>
<div id='num12'>12</div>
<!-- 60=1 2 15=3 30=6 45=9 -->

CSS

body {
    font-family:'Raleway'
}
div {
    width: 20px;
    height: 20px;
    background: yellow;
    position: absolute;
}
#num12 {
    margin: 0px 0 0 200px;
}
#num1 {
    margin: 20px 0 0 250px;
}
#num11 {
    margin: 20px 0 0 150px;
}
#num2 {
    margin: 55px 0 0 280px;
}
#num10 {
    margin: 55px 0 0 120px;
}
#num3 {
    margin: 85px 0 0 300px;
}
#num9 {
    margin: 85px 0 0 100px;
}
#num4 {
    margin: 120px 0 0 280px;
}
#num8 {
    margin: 120px 0 0 120px;
}
#num5 {
    margin: 150px 0 0 250px;
}
#num7 {
    margin: 150px 0 0 150px;
}
#num6 {
    margin: 180px 0 0 200px;
}

JavaScript

var div = document.getElementsByTagName('div');
var h1 = document.getElementsByTagName('h1')[0];

function clockWork() {
    var date = new Date(),
        //    Twelth of asecond
        sec = date.getSeconds(),
        min = date.getMinutes();
    var mil = parseInt(date.getMilliseconds() / (1000/ 12), 10) + 1;
    
    if(mil === 12){
        
    }
    var a;
    // Buggy without loop
    for (var i = 0; i < 12; i++) {
           
            a = parseInt(sec / 5,10) ;
         var curNum = div[a].innerHTML;
        
    }
  console.log(mil);
  //  if(a < curNum +1){   
 div[a].innerHTML = mil;
  //  }

    requestAnimationFrame(clockWork);
}



requestAnimationFrame(clockWork);