analog colck

by youtag

HTML

<div id="wrapper">
    <div class="clock">
        <div class="clockhighlight1">
            <div class="clockface">
                <div class="fiveminutes" id="sixty"></div>
                <div class="minutes" id="one"></div>
                <div class="minutes" id="two"></div>
                <div class="minutes" id="three"></div>
                <div class="minutes" id="four"></div>
                <div class="fiveminutes" id="five"></div>
                <div class="minutes" id="six"></div>
                <div class="minutes" id="seven"></div>
                <div class="minutes" id="eight"></div>
                <div class="minutes" id="nine"></div>
                <div class="fiveminutes" id="ten"></div>
                <div class="minutes" id="eleven"></div>
                <div class="minutes" id="twelve"></div>
                <div class="minutes" id="thirteen"></div>
                <div class="minutes" id="fourteen"></div>
                <div class="fiveminutes" id="fifteen"></div>
                <div class="minutes" id="sixteen"></div>
                <div class="minutes" id="seventeen"></div>
                <div class="minutes" id="eighteen"></div>
                <div class="minutes" id="nineteen"></div>
                <div class="fiveminutes" id="twenty"></div>
                <div class="minutes" id="twentyone"></div>
                <div class="minutes" id="twentytwo"></div>
                <div class="minutes" id="twentythree"></div>
                <div class="minutes" id="twentyfour"></div>
                <div class="fiveminutes" id="twentyfive"></div>
                <div class="minutes" id="twentysix"></div>
                <div class="minutes" id="twentyseven"></div>
                <div class="minutes" id="twentyeight"></div>
                <div class="minutes" id="twentynine"></div>
                <div class="fiveminutes" id="thirty"></div>
                <div class="minutes" id="thirtyone"></div>
                <div...

CSS

@charset"utf-8";

/* CSS Document */
 body {
    background:#111;
}
#wrapper {
    width: 455px;
    margin: 30px auto;
    text-align: center;
}
.button {
}
.clock {
    display: block;
    width: 405px;
    height: 405px;
    border:1px solid #3F1B05;
    background: #000;
    -moz-border-radius: 223px;
    -webkit-border-radius: 223px;
    border-radius: 223px;
    padding: 20px;
    position:relative;
}
#centerPoint {
}
.clockhighlight1 {
    display: block;
    width: 363px;
    height: 363px;
    background: #222;
    border-radius: 200px;
    border:6px solid #000;
    padding: 16px;
}
.clockface {
    display: block;
    width: 340px;
    height: 340px;
    background: #111;
    -webkit-border-radius: 180px;
    -moz-border-radius: 180px;
    border-radius: 180px;
    border:10px solid #000;
}
.numbers {
    padding-top:22px;
    padding-left:-5px;
    position: absolute;
    display:block;
    font-family: Helvetica;
    color:white;
}
#numberone {
    top: 85px;
    right: 150px;
    -webkit-transform:rotate(30deg);
}
#numbertwo {
    top: 135px;
    right: 100px;
    -webkit-transform:rotate(60deg);
}
#numberthree {
    top: 205px;
    right: 82px;
    -webkit-transform:rotate(90deg);
}
#numberfour {
    top: 265px;
    right: 103px;
    -webkit-transform:rotate(120deg);
}
#numberfive {
    top: 310px;
    right: 150px;
    -webkit-transform:rotate(150deg);
}
#numbersix {
    top: 330px;
    right: 215px;
    -webkit-transform:rotate(180deg);
}
#numbereleven {
    top: 85px;
    left: 150px;
    -webkit-transform:rotate(330deg);
}
#numberten {
    top: 135px;
    left: 100px;
    -webkit-transform:rotate(300deg);
}
#numbereight {
    top: 265px;
    left: 100px;
    -webkit-transform:rotate(240deg);
}
#numberseven {
    top: 310px;
    left: 150px;
    -webkit-transform:rotate(210deg);
}
#numbernine {
    top: 200px;
    left: 85px;
    -webkit-transform:rotate(270deg);
}
#numbertwelve {
    top: 70px;
    right: 215px;
}
.minutes {
    position:...

JavaScript

var timer = setInterval(

  	function () {
  	    getTime()
  	}, 1000)



  	    function getTime() {
  	        var d = new Date();
  	        var hours = d.getHours();
  	        var minute = d.getMinutes();
  	        var seconds = d.getSeconds();
  	        var hourRotate;
  	        var minRotate;
  	        var secRotate;

  	        hours = ((hours > 12) ? hours - 12 : hours);
  	        if (minute === 0) {
  	            minRotate = 0;
  	        } else {
  	            minRotate = minute * 6;
  	        }
  	        if (seconds === 0) {
  	            secRotate = 0;
  	        } else {
  	            secRotate = seconds * 6;
  	        }
  	        if (hours === 12) {
  	            hourRotate = 0;
  	        } else {
  	            hourRotate = (hours * 30) + (minute / 2);

  	        }


  	        var srotate = "rotate(" + secRotate + "deg)";
  	        $("#sechand").css({
  	            "-moz-transform": srotate,
  	                "-webkit-transform": srotate
  	        });
  	        var hrotate = "rotate(" + hourRotate + "deg)";
  	        $("#hourhand").css({
  	            "-moz-transform": hrotate,
  	                "-webkit-transform": hrotate
  	        });
  	        var mrotate = "rotate(" + minRotate + "deg)";
  	        $("#minhand").css({
  	            "-moz-transform": mrotate,
  	                "-webkit-transform": mrotate
  	        });
  	    }