<script>
(function($) {
$.fn.jclock = function(options) {
var version = '1.2.0';
// options
var opts = $.extend({}, $.fn.jclock.defaults, options);
return this.each(function() {
$this = $(this);
$this.timerID = null;
$this.running = false;
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.timeNotation = o.timeNotation;
$this.am_pm = o.am_pm;
$this.utc = o.utc;
$this.utc_offset = o.utc_offset;
$this.css({
fontFamily: o.fontFamily,
fontSize: o.fontSize,
backgroundColor: o.background,
color: o.foreground
});
$.fn.jclock.startClock($this);
});
};
$.fn.jclock.startClock = function(el) {
$.fn.jclock.stopClock(el);
$.fn.jclock.displayTime(el);
}
$.fn.jclock.stopClock = function(el) {
if(el.running) {
clearTimeout(el.timerID);
}
el.running = false;
}
$.fn.jclock.displayTime = function(el) {
var time = $.fn.jclock.getTime(el);
el.html(time);
el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},1000);
}
$.fn.jclock.getTime = function(el) {
var now = new Date();
var hours, minutes, seconds;
if(el.utc == true) {
var localTime = now.getTime();
var localOffset = now.getTimezoneOffset() * 60000;
var utc = localTime + localOffset;
var utcTime = utc + (3600000 * el.utc_offset);
now = new Date(utcTime);
}
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
var am_pm_text = '';
(hours >= 12) ? am_pm_text = " P.M." : am_pm_text = " A.M.";
if (el.timeNotation == '12h') {
hours = ((hours > 12) ? hours - 12 : hours);
} else if (el.timeNotation == '12hh') {
hours = ((hours > 12) ? hours - 12 : hours);
hours = ((hours < 10) ? "0" : "") + hours;
} else {
hours = ((hours < 10) ? "0" : "") + hours;
}
minutes = ((minutes < 10) ? "0" : "") + minutes;
seconds = ((seconds < 10) ? "0" : "") + seconds;
var timeNow = hours + ":" + minutes + ":" + seconds;
if ( (el.timeNotation == '12h' || el.timeNotation == '12hh') && (el.am_pm == true) ) {
timeNow += am_pm_text;
}
return timeNow;
};
// plugin defaults
$.fn.jclock.defaults = {
timeNotation: '24h',
am_pm: false,
utc: false,
fontFamily: '',
fontSize: '',
foreground: '',
background: '',
utc_offset: 0
};
})(jQuery);
</script>
Örnek -1
<script type="text/javascript">
$(function($) {
$('.jclock').jclock();
});
</script>
<div class="jclock"></div>
örnek-2
<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>
<div class="jclock"></div>
paremetreler :
* 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
|
