»
EnglishFrenchVietnamese

Print - JavaScript Word Clock: Spell the Time - JavaScriptBank.com

Full version: jsB@nk » Framework » jQuery » JavaScript Word Clock: Spell the Time
URL: https://www.javascriptbank.com/javascript-word-clock-spell-the-time.html

JavaScript Word Clock: Spell the Time © JavaScriptBank.comThis 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



CSS
<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>


JavaScript
<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>


HTML
<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>