Jquery Clock

CaldwellYSR · Jun 9, 2011

So I have this corny idea to make a clock with two hour hands. One hand showing the client's local time and the other showing my time (Central Standard Time). I have the clock working and showing the client's time, however I can't figure out how to add another hour hand showing my time. Does anyone have any ideas how this can be done??? Here's the I have right now.

<head>

<title>Clock</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#clock {
position: relative;
width: 600px;
height: 600px;
margin: 20px auto 0 auto;
background: url(images/clockface.jpg);
list-style: none;
}

#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 0px;
left: 285px;
}

#sec {
background: url(images/sechand.png);
z-index: 4;
}

#min {
background: url(images/minhand.png);
z-index: 3;
}

#hour {
background: url(images/hourhand.png);
z-index: 2;
}

p {
text-align: center;
padding: 10px 0 0 0;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";

$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

}, 1000 );

setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";

$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});

}, 1000 );

setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";

$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});

}, 1000 );

});

</script>

</head>

<body>

<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>

</body>

I didn't come up with this code, it came from here but I understand the html and css involved and I have a pretty good understanding of the jquery as well (I'm not super comfortable with Jquery just yet). My figuring is that i should just add another <li> with and id of hour2 or something. My only problem comes with the jquery... I have no idea how to make that hour hand show a specific time zone....

TheLunarEclipse · Jun 11, 2011

I'm not entirely sure about the second hour, but I do know that you need to include the </html> code at the end

CaldwellYSR · Jun 11, 2011

Yeah I left the html and doctype out of this post but they're in the actual document...

vansmith · Jun 11, 2011

Take a look here and here. My suggestion would be to set the clock according to their time zone and then using that, figure out how far their TZ is from yours and set the clock accordingly.

In other words, let's say I'm in the eastern time zone and you're in the pacific time zone (three hours behind the eastern one). I view the page and the JS figures out that I'm in the eastern time zone. The script then calculates how far back/ahead I am from yours and figures out that I'm three hours ahead. The script then creates a second hour hand that is three hours behind (this would be your time).

I'm not a JS expert so that may sound like a daft solution but it's a start.

CaldwellYSR · Jun 11, 2011

Those are pretty interesting links and I think the solution you have might have worked if I was just showing the time in a digital clock so Kudos because I couldn't find that answer anywhere! Unfortunately I'm trying to make an analog clock that works off the css.rotate function and that wouldn't work but I did finally manage to make it work sort of...

The person I'm making this clock for lives in Pacific time zone and I live in Central so she's two hours behind me. So if I just bump the degrees to rotate the image by 60 degrees then it will show the correct time for her. It's not the best fix in the world because if she's ever in a different time zone it will be wrong but it works for now i guess. Maybe one day I'll go in and find a way to make it do what I want.

vansmith · Jun 11, 2011

Wy not calculate the rotation based on what time zone she's in relative to yours? Given that 30° is one hour, figure out how many time zones back/forward she is, multiply that by 30 and then use that value to rotate the image.

I'll take a crack at this later this evening to see what I can come up with. Should give me a good chance to see how much JS and CSS I really know!

CaldwellYSR · Jun 11, 2011

That's what I did... I added 60 degrees to the rotation to make it push that hour hand 2 hours ahead of the other hour hand. That's a nice temporary fix but I hope to be able to figure out how to make one show CST and the other always show local. That would be best.

Jquery Clock

CaldwellYSR

TheLunarEclipse

CaldwellYSR

vansmith

Senior Member

CaldwellYSR

vansmith

Senior Member

CaldwellYSR

Shop Amazon