Simple clock – display 12-hour or 24-hour time notation, local or UTC time.
Options:
* timeNotation (String): Type of time display: ‘24h’ or ‘12h’ (’12hh’ inserts leading 0). Default: ‘24h’
* am_pm (Boolean): true/false. If true, displays A.M./P.M. Default: false (12h timeNotaion only)
* utc (Boolean): true/false. If true, shows time using UTC. Defaul: false
* utc_offset (Number): If specified, sets offset from UTC, negative or positive. Default: 0
* fontFamily (String): If specified, sets CSS fontFamily. Default: null
* fontSize (Number): If specified, sets CSS fontSize. Default: null
* foreground (String): If specified, sets CSS foreground color. Default: null
* background (String): If specified, sets CSS background color. Default: null
* timeNotation (String): Type of time display: ‘24h’ or ‘12h’ (’12hh’ inserts leading 0). Default: ‘24h’
* am_pm (Boolean): true/false. If true, displays A.M./P.M. Default: false (12h timeNotaion only)
* utc (Boolean): true/false. If true, shows time using UTC. Defaul: false
* utc_offset (Number): If specified, sets offset from UTC, negative or positive. Default: 0
* fontFamily (String): If specified, sets CSS fontFamily. Default: null
* fontSize (Number): If specified, sets CSS fontSize. Default: null
* foreground (String): If specified, sets CSS foreground color. Default: null
* background (String): If specified, sets CSS background color. Default: null
Example 1:
Basic clock, no options
<html>
<head>
<title>jclock</title>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.jclock.js"></script>
<script type="text/javascript">
$(function($) {
$('.jclock').jclock();
});
</script>
</head>
<body>
<div class="jclock"></div>
</body>
</html>
Example 2:
Clock, non-UTC, with options
<html>
<head>
<title>jclock</title>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.jclock.js"></script>
<script type="text/javascript">
$(function($) {
var options = {
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'yellow',
background: 'red'
}
$('.jclock').jclock(options);
});
</script>
</head>
<body>
<div class="jclock"></div>
</body>
</html>
Example 3:
Clock, UTC
<html>
<head>
<title>jclock
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.jclock.js"></script>
<script type="text/javascript">
$(function($) {
var options = {
utc: true
}
$('.jclock').jclock(options);
});
</script>
</title></head>
<body>
<div class="jclock"></div>
</body>
</html>
Example 4:
Multiple clocks using different time zone offsets
<html>
<head>
<title>jclock</title>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.jclock.js"></script>
<script type="text/javascript">
$(function($) {
var optionsEST = {
utc: true,
utc_offset: -5
}
$('#jclock1').jclock(optionsEST);
var optionsCST = {
utc: true,
utc_offset: -6
}
$('#jclock2').jclock(optionsCST);
var optionsIndia = {
utc: true,
utc_offset: 5.5
}
$('#jclock3').jclock(optionsIndia);
});
</script>
</head>
<body>
<p>EST: <span id="jclock1"></span></p>
<p>CST: <span id="jclock2"></span></p>
<p>India: <span id="jclock3"></span></p>
</body>
</html>
Example 5:
Styled clocks (first clock uses jquery.corner.js)
<html>
<head>
<title>jclock</title>
<style type="text/css">
body {
font: Verdana,Arial,sans-serif;
/* An explicit background color is required for Safari. */
/* Otherwise your corner chunks will come out black! */
background: #f8f0e0;
}
div.corner, div.nocorner {
width: 10em;
padding: 20px;
margin: 1em;
background: #f00;
color: #000;
text-align: center;
font: verdana, arial, sans-serif;
}
</style>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.jclock.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(function($) {
var options = {
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'yellow',
background: 'red'
}
$('.jclock').jclock(options);
$('.corner').corner("30px");
});
</script>
</head>
<body>
<p><div class="corner"><div class="jclock"></div></div></p>
<p><div class="nocorner"><div class="jclock"></div></div></p>
</body>
</html>
Demo:
