JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="cssclock">

    <div id="clockanalog">
        <img src="http://static.joncom.be/screen/images/code/css-clocks/analogseconds.png" id="analogsecond" alt="second-hand">
        <img src="http://static.joncom.be/screen/images/code/css-clocks/analogminutes.png" id="analogminute" alt="minute-hand">
        <img src="http://static.joncom.be/screen/images/code/css-clocks/analoghours.png" id="analoghour" alt="hour-hand">
    </div>

    <div id="clockdigital">
        <img src="http://static.joncom.be/screen/images/code/css-clocks/digitalhours.gif" id="digitalhour" alt="hours">
        <img src="http://static.joncom.be/screen/images/code/css-clocks/digitalminutes.gif" id="digitalminute" alt="minutes">
        <img src="http://static.joncom.be/screen/images/code/css-clocks/digitalseconds.gif" id="digitalsecond" alt="seconds">

        <div style="opacity: 0.8; ">&nbsp;</div>
        <div style="opacity: 0.8; ">&nbsp;</div>
    </div>
</div>

CSS

#cssclock { height: 270px; }
#clockanalog { background: #012345 url("http://static.joncom.be/screen/images/code/css-clocks/analog1.gif") no-repeat 0 0; float: left; height: 250px; margin: 0; overflow: hidden; position: relative; width: 250px; }
#clockanalog img { border: 0; left: 0px; position: absolute; top: 0px; }
#clockdigital { background: #012345 url("http://static.joncom.be/screen/images/code/css-clocks/digital.gif") no-repeat 162px 99px; float: right; height: 250px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 485px; }
#clockdigital div { background: #012345; height: 88px; position: absolute; width: 485px; }
#clockdigital div:last-child { bottom: 0; }
#clockdigital img { border: 0; display: block; height: 2000px; left: -1553px; margin: 0; padding: 0; position: absolute; top: -867px; width: 2000px; }

JavaScript

var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
    fGetHour:     function() {
        var iHours = this.dtDate.getHours();
        if (iHours > 11) {
            iHours -= 12;
        }
        return Math.round((this.dtDate.getHours() * 30) + (this.dtDate.getMinutes() / 2) + (this.dtDate.getSeconds() / 120));
    },
    fGetMinute:     function() {
        return Math.round((this.dtDate.getMinutes() * 6) + (this.dtDate.getSeconds() / 10));
    },
    fInit:          function() {
        this.iHourRotation = this.fGetHour();
        this.fRotate("analoghour", this.iHourRotation);

        this.iMinuteRotation = this.fGetMinute();
        this.fRotate("analogminute", this.iMinuteRotation);

        this.iCurrSecond = this.dtDate.getSeconds();
        this.fRotate("analogsecond", (6 * this.iCurrSecond));
    },
    fRotate:        function(sID, iDeg) {
        var sCSS = ("rotate(" + iDeg + "deg)");
        $("#" + sID).css({ '-moz-transform': sCSS, '-o-transform': sCSS, '-webkit-transform': sCSS });
    },
    fStepSize:     function(iTo, iFrom) {
        var iAnimDiff = (iFrom - iTo);
        if (iAnimDiff > 0) {
            iAnimDiff -= 360;
        }
        return iAnimDiff / this.iStepSize;
    },
    fUpdate:        function() {
        // update time
        this.dtDate = new Date();

        // hours
        var iTemp = this.fGetHour();
        if (this.iHourRotation != iTemp) {
            this.iHourRotation = iTemp;
            this.fRotate("analoghour", iTemp);
        }

        // minutes
       ...