jQuery clock

by slawe

HTML

<ul id="clock">	
  <li id="sec"></li>
  <li id="hour"></li>
  <li id="min"></li>
</ul>

CSS

body {
    background: lightgreen;
}
#clock {
  padding: 0;
  position: relative;
  width: 189px;
  height: 187px;
  margin: 20px auto 0 auto;
  background: url(http://devble.com/wp-content/uploads/2014/06/frame.png);
  list-style-type: none;
}
#sec, #min, #hour {
  position: absolute;
  width: 189px;
  height: 187px;
  top: 0px;
  left: 0px;
  list-style-type:none
}

#sec {
  background: url(http://devble.com/wp-content/uploads/2014/06/seconds.png);
  z-index: 3;
}
   
#min {
  background: url(http://devble.com/wp-content/uploads/2014/06/mins.png);
  z-index: 2;
}
   
#hour {
  background: url(http://devble.com/wp-content/uploads/2014/06/hours.png);
  z-index: 1;
}

JavaScript

$(function() {     
   setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";
      $("#sec").css({ "transform": srotate });
   }, 10);

   setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
      $("#hour").css({ "transform": hrotate});
   }, 10);

   setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";
      $("#min").css({ "transform" : mrotate });
   }, 10);
});