CaldwellYSR
10 Jun 2011, 07:11 AM
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 (http://css-tricks.com/css3-clock/) 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....
<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 (http://css-tricks.com/css3-clock/) 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....