Full version: jsB@nk » Framework » jQuery » JavaScript Word Clock: Spell the Time
URL: https://www.javascriptbank.com/javascript-word-clock-spell-the-time.html
This is most excellent JavaScript clock on the web page I ever see, although this is 5 minutes interval JavaScript clock but it has a very nice design and very unique performance: writing the time in words only. Let check it out!
Full version: jsB@nk » Framework » jQuery » JavaScript Word Clock: Spell the Time
URL: https://www.javascriptbank.com/javascript-word-clock-spell-the-time.html
<style> body { background-color: #111; } div#clock { font-size: 50px; font-family: monospace; color: #222; text-align: center; } .lightup { color: #EEE; } .seclightup { color: #EEE; } .gumuz { color: #333; } </style><script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.setOnLoadCallback(function() { function render_time(classes) { // reset $('span').removeClass('lightup'); //toggle_sec(); for (var i in classes) { $(classes[i]).addClass('lightup'); } } function toggle_sec() { if ($('.sec').hasClass('seclightup')) { $('.sec').removeClass('seclightup') } else { $('.sec').addClass('seclightup') } } function check_time() { var classes = ['.it_is'] toggle_sec(); var date = new Date(); var hours = date.getHours()%12; if (hours==0) hours = 12; var minutes = date.getMinutes()-(date.getMinutes()%5); if (date.getMinutes()%5 > 2) minutes = minutes + 5; if (minutes == 60) { minutes = 0; hours = hours+1;} // stupid switch logic... if (minutes == 0) { // o'clock! classes.push('.'+hours); classes.push('.oclock'); } else if (minutes == 30) { // half past classes.push('.'+hours); classes.push('.half'); classes.push('.past'); } else if (minutes == 15) { // quarter past classes.push('.'+hours); classes.push('.past'); classes.push('.quarter'); } else if (minutes == 45) { // quarter to if (hours==12) hours = 0; classes.push('.'+(hours+1)); classes.push('.quarter'); classes.push('.to'); } else if (minutes < 30) { // X past classes.push('.'+hours); classes.push('.'+minutes+'to'); classes.push('.past'); classes.push('.minutes'); } else if (minutes > 30) { // X to if (hours==12) hours = 0; classes.push('.'+(hours+1)); classes.push('.'+(60-minutes)+'to'); classes.push('.to'); classes.push('.minutes'); } render_time(classes); } setInterval(check_time, 1000); });</script><div id="clock"> <span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br> <span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br> <span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br> <span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br> <span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br> <span class="4">four</span><span class="5">five</span><span class="7">seven</span><br> <span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br> <span class="10">ten</span><span class="11">eleven</span><span class="sec">♥</span>sec<br> <span class="12">twelve</span><span class="oclock">o'clock</span><br> </div>