Clock

by hlmurray91

HTML

<div id="js-us-clock" class="clock"></div>

CSS

*{
    box-sizing: border-box;
}

.clock{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    display: block;
    height: 150px;
    width: 150px;
    border: 6px solid black;
    border-radius: 100%;
}
.clock:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    margin-top: -3px;
    margin-left: -3px;
    display: block;
    height: 6px;
    width: 6px;
    background: black;
    border-radius: 100%;
}

.hour{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 3;
    display: block;
    height: 100%;
    width: 6px;
    padding: 30px 0;
    transition: transform .4s;
}
.hour:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: black;
}

.minute{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 2;
    display: block;
    height: 100%;
    width: 6px;
    padding: 10px 0;
    transition: transform .4s;
}
.minute:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: black;
}

.second{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 3;
    display: block;
    height: 100%;
    width: 3px;
    padding: 10px 0;
}
.second:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: red;
}

JavaScript

Clock.prototype = {
    clocking: function(){
        var clockEle = this.element,
            hourEle = $(document.createElement('div')),
            minuteEle = $(document.createElement('div')),
            secondEle = $(document.createElement('div'));
        console.log(clockEle);
        // Append elements inside clock
        $(clockEle).append(hourEle);
        $(hourEle).addClass("hour");
        $(clockEle).append(minuteEle);
        $(minuteEle).addClass("minute");
        $(clockEle).append(secondEle);
        $(secondEle).addClass("second");
  
        // get hands positions
        var hourPos,
            minutePos,
            secondPos,
            currentMinute;
    
        // run once, then update clock every second.
        getTimePos();
        setInterval(function(){
            getTimePos();
        }, 1);
        
        
        function getTimePos(){
            // gets hour and minute, transfer to 12 hour clock
            var hoursTime = new Date().getUTCHours();
            if(hoursTime > 12){
                hoursTime = hoursTime-12;
            }
            var regionOffset = new Date().getTimezoneOffset() * -1,
                minutesTime = new Date().getUTCMinutes() + regionOffset,
                secondsTime = new Date().getUTCSeconds(),
                milliSecondsTime = new Date().getUTCMilliseconds(),
                hourRotation = 360/12, // c/hours
                minuteRotation = 360/60, // c/minutes
                secondRotation = 360/60000; // c/seconds
              hourPos = (hourRotation * hoursTime) + ((hourRotation/60)*minutesTime); // gets hour hand position
              minutePos = minuteRotation * minutesTime; // gets minute hand position
              secondPos = (secondRotation * milliSecondsTime) + (secondRotation * 1000 * secondsTime); //gets second hand position
    
            setTimeout(function() {
                setTimePos(); // update the hands
            }, 400);
              
             ...