JavaScript Word Clock: Spell the Time - Web Design Forum Graphic Design Site Templates Flash CSS Discussions

JavaScriptBank · #1 07-02-2010, 01:37 AM

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 ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript JavaScript Word Clock: Spell the Time

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

Code:

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

Step 2: Use JavaScript code below to setup the script
JavaScript

Code:

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

Step 3: Place HTML below in your BODY section
HTML

Code:

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

JavaScript Countdown Timer - JavaScript Web based Music Player - JavaScript AJAX Page Content Loader