September 20th, 2011 
admin This post has jQuery code to show the time in different time zones using jclock plugin. You can use this code to display world clock.
Here, I am displaying country names in dropdown, when you click on that it will show the current time in that country. See the live demo here.
We have used jQuery jclock plugin to display the time, need to pass the UTC offset value to the plugin to display time in country time zone. Offeset values are included as a value in the dropdown option items.
<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() {
$("#zones").change(function(){
if ($('#time-cont .time').length>0){ $('#time-cont .time').remove();}
var offset = $(this).val();
if (offset == '') return;
$('#time-cont').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: offset
}
$('#time-cont .time').jclock(options);
});
});
</script>
</head>
<body>
<select id="zones">
<option value="">--Select--</option>
<option value="10">Australia</option> // Australia UTC offset value is 10
<option value="8">China</option>
<option value="5.5">India</option>
<option value="12">Newzealand</option>
<option value="0">UK</option>
<option value="-5">US EST</option>
</select>
<div id="time-cont"></div>
</body>
</html>
jClock plugin has lot of options to customize the display.
Above example, I have used few country names as samples, you can add as many as you want, you just need to find the UTC offset value of the country and add as the value of option item.
For Further Reading:
Posted in 
Tags: 
The output is wrong
. I see 1 hour difference for india and timing for other countries are also not correct
1 hour difference is because of Day light saving time. if something is wrong then you just need to change the dropdown option value to the country GMT offset value.
is it possible to get them in a table. instead of options?
Dear sir,
this j query code for world clock is not being compatible with IE but working in firefox & chrome.
please suggest me how to make compatibility with IE
mail me……….
9873718915
Am I doing something wrong – timeNotation: ’24h’, doesn’t work?
Nevermind, had to change to %H from %I