Skip to content

Instantly share code, notes, and snippets.

@arbo77
Created August 1, 2012 19:37
Show Gist options
  • Save arbo77/3229989 to your computer and use it in GitHub Desktop.
Save arbo77/3229989 to your computer and use it in GitHub Desktop.
jQuery plugin to display clock
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqlock usage</title>
<meta name="author" content="[email protected]" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jqlock.js"></script>
<script>
$().ready(function(){
$("#d1").jqlock({format:"datetime"});
$("#d2").jqlock({format:"date"});
$("#d3").jqlock({format:"time"});
});
</script>
</head>
<body>
<h1>jqlock usage</h1>
<div>Datetime : <span id="d1"></span></div>
<div>Date : <span id="d2"></span></div>
<div>Time : <span id="d3"></span></div>
</body>
</html>
/**
* jqlock.js
* ver: 0.1
*
* jQuery plugin to display clock
*
* Copyright 2012 Ari W <[email protected]>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
*/
(function( $ ) {
$.fn.jqlock = function(opt) {
var me = $(this);
if(!opt){
var opt = {
format:"datetime"
}
}
setInterval(function(){
var d = new Date();
switch(opt.format){
case "date":
me.html(d.getDate() + " " +
bulan.full[d.getMonth()] + " " +
d.getFullYear());
break;
case "datetime":
me.html(d.getDate() + " " +
bulan.full[d.getMonth()] + " " +
d.getFullYear() + " " +
d.getHours().toString().lpad("0",2) + ":" +
d.getMinutes().toString().lpad("0",2) + ":" +
d.getSeconds().toString().lpad("0",2));
break;
case "time":
me.html(d.getHours().toString().lpad("0",2) + ":" +
d.getMinutes().toString().lpad("0",2) + ":" +
d.getSeconds().toString().lpad("0",2));
break;
}
me.html();
},1000);
}
})( jQuery );
var bulan = {
full :["Januari","Februari","Maret","April","Mei","Juni","Juli",
"Agustus","September","Oktober","Nopember","Desember"],
short:["Jan","Feb","Mar","Apr","Mei","Jun",
"Jul","Ags","Sep","Okt","Nop","Des"]
};
String.prototype.lpad = function(padString, length) {
var str = this;
while (str.length < length)
str = padString + str;
return str;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment