Clock.js

JavaScript library for clocks in widgets.

View/Download Latest Back to Libraries

Getting started

Clock.js is a small library used to make writing widgets/lockscreens easier and more consitent.

Available calls

clock.hour();
clock.rawhour();
clock.minute();
clock.rawminute();
clock.am();
clock.date();
clock.day();
clock.month();
clock.year();
clock.hourtext();
clock.minuteonetext();
clock.minutetwotext();
clock.daytext();
clock.sdaytext();
clock.monthtext();
clock.datetext();
clock.dateplus();

Example HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<div id="time"></div>
<div id="date"></div>
<div id="year"></div>
<div id="texttime"></div>

<!--include clock.js -->
<script src="js/clock.js"></script>


<!-- get times -->
<script>
clock({
  twentyfour : false,
  padzero : false,
  refresh : 5000,
  success: function(clock){
    document.getElementById('time').innerHTML = clock.hour() + ':' + clock.minute();                  
    document.getElementById('date').innerHTML = clock.date();                  
    document.getElementById('year').innerHTML = clock.year();                  
    document.getElementById('texttime').innerHTML = clock.hourtext() + ' ' + clock.minuteonetext() + ' ' + clock.minutetwotext();                  
  }
});
</script>
Tweet Libraries hosted with ❤ by JunesiPhone

1.0.2

Fixed a bug with clock.hourtext().

When when pad zero was set to true the hourtext would return undefined

Thanks to @hizinfiz for reporting this bug.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<div id="time"></div>


<!--include clock.js -->
<script src="js/clock.js"></script>


<!-- get times -->
<script>
clock({
  twentyfour : false,
  padzero : false,
  refresh : 5000,
  success: function(clock){
    document.getElementById('time').innerHTML = clock.hourtext() + clock.minuteonetext() + clock.minutetwotext();                  

  }
});
</script>
Tweet Libraries hosted with ❤ by JunesiPhone

1.0.3

Added date padding and timestrplus.

You can now get a string like twenty five minutes to five.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<div id="time"></div>


<!--include clock.js -->
<script src="js/clock.js"></script>


<!-- get times -->
<script>
clock({
  twentyfour : false,
  padzero : false,
  refresh : 5000,
  success: function(clock){
    document.getElementById('hr').innerHTML = clock.timeStrPlus('hr');
   document.getElementById('min').innerHTML = clock.timeStrPlus('min');                  

  }
});
</script>
Tweet Libraries hosted with ❤ by JunesiPhone