jquery digital clock
Question
I am trying to use the example based here: http://www.techtricky.com/jquery-code-to-show-time-in-different-countries/
However I am new to JS and am having trouble. I am basically trying to get it to show the time without the select box.
I will then be trying to show multiple different times at once.
eg
+------------------+ | 10:14:14 pm | | 08:14:14 pm | | 06:14:14 pm | +------------------+
I realise that the var options allows me to set the style and the time offset. However the function is the bit I am confused. I've been trying to set the #zones to automatically run but can't get it to without having to select something. (ideally I wouldn't have the select in there at all, I tried setting a default to the zones select but that didn't work either) I think it's because the function has $("#zones"). change so will only run on a change.
TIA!
2 answers
solution1
1 ACCPTED 2013-01-11 17:24:31
You could do something ugly like that Obviously you can do it in a loop or something so you don't have to write your code 3 times like I did here
Also - There are few examples in the jclock documentation : https://sites.google.com/site/jqueryjclockjs/
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://techtricky.com/wp-content/jquery/jquery.jclock.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#time-cont1').append('<div class="time"></div>');
var options = {
format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'black',
background: 'yellow',
utc:true,
utc_offset: 8
}
$('#time-cont1 .time').jclock(options);
$('#time-cont2').append('<div class="time"></div>');
var options = {
format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'black',
background: 'yellow',
utc:true,
utc_offset: 6
}
$('#time-cont2 .time').jclock(options);
$('#time-cont3').append('<div class="time"></div>');
var options = {
format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'black',
background: 'yellow',
utc:true,
utc_offset: -5
}
$('#time-cont3 .time').jclock(options);
});
</script>
</head>
<body>
Country1: <div id="time-cont1"></div>
Country2: <div id="time-cont2"></div>
Country3: <div id="time-cont3"></div>
</body>
</html>
solution2
1 2013-01-11 19:44:21
您可能对此感兴趣： Raphael - Polar Clock
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.