1function degreesRadians(degrees)
 2{
 3  return degrees * (Math.PI/180);
 4}
 5function updateClock(){
 6    var d = new Date();
 7    var s = d.getSeconds();
 8    var m = d.getMinutes();
 9    var h = d.getHours();
10    var sa = (s/60*360);
11    var ma = (m/60*360);
12    var ha = (h/12*360);
13    document.getElementById("clock-second-hand").style.transform = "rotate("+(sa+180)+"deg)";
14    document.getElementById("clock-minute-hand").style.transform = "rotate("+(ma+180)+"deg)";
15    document.getElementById("clock-hour-hand").style.transform = "rotate("+(ha+180)+"deg)";
16}
17
18setInterval(updateClock,500);
19var i = 0;
20var timer = setInterval(function() {
21  if (i === 11) clearInterval(timer);
22  var clockFaceLine = document.createElement("div");
23    var clockFaceLineAngle = i/12*360;
24    clockFaceLine.className = "clock-face-line"
25    clockFaceLine.style.top=(250+(246*Math.sin(degreesRadians(clockFaceLineAngle))))+"px";
26    clockFaceLine.style.left=(248+(246*Math.cos(degreesRadians(clockFaceLineAngle))))+"px";
27    clockFaceLine.style.transform = "rotate("+(clockFaceLineAngle+90)+"deg)";
28    document.getElementById("clock-face").appendChild(clockFaceLine)
29  i++;
30}, 100);
31updateClock();