Jquery Clock

CaldwellYSR

CaldwellYSR

Member
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>
Click to expand...

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....


After a bit of looking around I think this might fit better under the "Scripts" forum...
 
Last edited:
CaldwellYSR

CaldwellYSR

Member
Well I got no responses but just in case anybody was wondering I did find a cheap fix for this. Since the person I'm doing this for lives in pacific time zone and I live in Central time zone she's always 2 hours behind me. So if I just bump the degrees it rotates by + 60 then that will push the local time 2 hours ahead. It's not a great fix because it doesn't exactly do what I want but it's a temporary solution until I can figure out a better way to do it.
 
CaldwellYSR

CaldwellYSR

Member
Because of RonaldRoe mentioning my old posts I decided my 500th post will be a bump from the grave of my first post ;) Sorry guys.

That being said, I did get this to work very well. It has an editable var for the default time zone and the other hour hand works off the local time zone. Should work in any of the us time zones. Check it out here
 
CaldwellYSR

CaldwellYSR

Member
Woah it finally got a response! ;) I find it funny that my first question on this forum never got answered and I stuck around anyway.
 
L

LouTheDesigner

New Member
Never saw this thread, but here is an idea. Create a variable with all possible time zones. Make a switch statement that detects all cases of this variable, and use a timestamp to adjust the other hand accordingly. For example, if it detects IST, and you are in EST, then your time should be 9.5 hours behind. This is just off the top of my head and I have no idea why I'm awake at 5:15 AM.

-Louis
 
CaldwellYSR

CaldwellYSR

Member
LouTheDesigner said:
Never saw this thread, but here is an idea. Create a variable with all possible time zones. Make a switch statement that detects all cases of this variable, and use a timestamp to adjust the other hand accordingly. For example, if it detects IST, and you are in EST, then your time should be 9.5 hours behind. This is just off the top of my head and I have no idea why I'm awake at 5:15 AM.

-Louis
Click to expand...

That's pretty close to what I did. I made a variable for the time zone I want the "me" hand to show. Then I made a variable for the user's time zone. Then a function that took the two time zones as a variable and figured the offset from those two variables.
 
You must log in or register to reply here.
Top