clock - digital & analog

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>clock</title>
  <style>
    #clock{position:relative;width:300px;height:300px;}
    #clock img {position:absolute;top:0;left:0;}
    #digital {
        width:300px; height:30px;
        line-height:30px; color:#fff;
        font-size:0.8em; font-weight:bold;
        background:#000; text-align:center;
    }
  </style>
 </head>
 <body>
    <div id="clock">
        <img src="clock.png">
        <img id="h" src="h.png">
        <img id="m" src="m.png">
        <img id="s" src="s.png">
    </div>
    <div id="digital"></div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function digital()
        {
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            if(h>12) h = h - 12;
            var dh = (h * 30) + (m/2);
            dh = parseInt(dh);
            var dm = m * 6;
            var ds = s * 6;
            $("#h").css("transform","rotate(" + dh + "deg)");
            $("#m").css("transform","rotate(" + dm + "deg)");
            $("#s").css("transform","rotate(" + ds + "deg)");
            $("#digital").html(h + ":" + m + ":" + s);
        }
        var timer = setInterval( digital, 1000);
    </script>
 </body>
</html>