JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

        <div id="clock" align="center">
                <div><img id="clockFace" src="http://www.paulrhayes.com/experiments/clock/images/clockFace.png"/></div>
            <div><img id="hourHand" src="http://www.paulrhayes.com/experiments/clock/images/hourHand.png"/></div>
            <div><img id="minuteHand" src="http://www.paulrhayes.com/experiments/clock/images/minuteHand.png"/></div>        
            <div><img id="secondHand" src="http://www.paulrhayes.com/experiments/clock/images/secondHand.png"/></div>
        </div>
        
        <table id="digitalTimer" align="center">
            <tr>--------------------------------------</tr>
                <tr><input type = "text" id = "timeNow" size = 200px align= "center"/></tr>
               <tr><input type = "text" id = "stayTime" size = 200px align = "center"/></tr>
            <tr>--------------------------------------</tr>
        </table>

CSS

#body
{
        text-align: center;
}

#clock 
{
    text-align: center;
 position: relative;
    width: 300px;
    height: 300px;
    background-image: url('http://www.paulrhayes.com/experiments/clock/images/clockFace.png');
}

#clock div
{
    position:absolute;
        width: 300px;
    height: 300px;
}

#clock img
{
    width: 300px;
    height: 300px;
}

#digitalTimer
{
    text-align: center;
        width: 300px;
}

#digitalTimer input
{
    text-align: center;
        width: 300px;
}

JavaScript

var timeNow, stayTime;
var start = new Date();
var minute = 0, second = 0;

$(document).ready(function(){
    
    reflashingTime();

});

function reflashingTime(){    

    var now = new Date();
    
    var s_angle, m_angle, h_angle;
    
    s_angle = start.getSeconds()*6;
    m_angle = start.getMinutes()*6;
    h_angle = start.getHours()*30;
    
    timeNow = document.getElementById("timeNow");
    stayTime = document.getElementById("stayTime");

    var t = (now.getTime() - start.getTime())/1000;

    second = parseInt(t%60);
    minute = parseInt(t/60);

    timeNow.value = now.toLocaleString();
    stayTime.value = "You've stayed for: " + minute + " m " + second + " s";
    
    var m = t/60;
    var h = m/60;
    
    $("#secondHand").rotate({angle:6*t+s_angle});    
    $("#minuteHand").rotate({angle:6*m+m_angle});
    $("#hourHand").rotate({angle:6*h+h_angle});
    
    var count;
    count = setTimeout("reflashingTime()", 1000);
    
};