Page 1 of 4 123 ... LastLast
Results 1 to 10 of 35

Thread: A clock but displayed as words

  1. #1
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default A clock but displayed as words

    Seems to be a bit of a fashionable thing as I have seen a few hardware clocks using words instead of numbers, any idea how this would be achieved in java ?

    format I am looking for is

    The Time is now :
    Ten minutes past
    One

    And after 30 minutes

    The Time is now :
    Ten minutes to
    Two

    I guess you get the idea

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    There are a number of word clocks on this site:

    http://words.onlineclock.net/clocks/

    One of those may suit your purposes. I'm not sure if you can download the code or use it as an API, but it gives a good starting block either way.

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    You could program this yourself. You'd basically need a very simple translation program from numbers to text. It wouldn't be too much more than a dictionary.
    And you could of course base that on the simplest clock script you can find (with numbers) as a starting point.

    ApacheTech, those clocks are gimmicky-- reversed text, etc. I don't think they will be what the OP is searching for.

    But there probably are some out there if you search for it.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    This is one of the scripts I have found at javascriptsource.com

    http://www.web-user.info/scripts/10/index.html
    Thanks,

    Bud

  5. #5
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ajfmrf View Post
    This is one of the scripts I have found at javascriptsource.com

    http://www.web-user.info/scripts/10/index.html
    Many thanks for the help, the nearest I have found was the above code, only problem was it was in my opinion half finished, no refresh and only saying the approximate time. I have had a play around and expanded the code to refresh every 5 seconds and show the time in a readable format, I must profess to not being a java coder, I am just OK at playing around with code and adjusting to to suit my needs, the code below is nearly there for what I want but I am struggling with styling it correctly, what I want is to be able to set the actual minutes and hours to a larger font, eg

    The time is
    fourteen minutes
    past ten
    in the evening

    Any help would be much appreciated, my code so far

    <html>
    <head>
    <title>Word Clock</title>

    <script language="Javascript">
    <!--
    function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod); //auto refresh every 5 second
    }
    function number(x) {
    if (x==1) return "one"; if (x==2) return "two"; if (x==3) return "three";
    if (x==4) return "four"; if (x==5) return "five"; if (x==6) return "six";
    if (x==7) return "seven"; if (x==8) return "eight"; if (x==9) return "nine";
    if (x==10) return "ten"; if (x==11) return "eleven"; if (x==12) return "twelve";
    return x; //default
    }
    function ttime(h,m) {
    h = number(h)
    if (m<=1 || m>59) return h+" o'clock";
    if (m<=1) return "one minute " + "<br>" +y +h;
    if (m<=2) return "two minutes " + "<br>" +y +h;
    if (m<=3) return "three minutes " + "<br>" +y +h;
    if (m<=4) return "four minutes " + "<br>" +y +h;
    if (m<=5) return "five " + "<br>" +y +h;
    if (m<=6) return "six minutes " + "<br>" +y +h;
    if (m<=7) return "seven minutes " + "<br>" +y +h;
    if (m<=8) return "eight minutes " + "<br>" +y +h;
    if (m<=9) return "nine minutes " + "<br>" +y +h;

    if (m<=10) return "ten " + "<br>" +y +h;
    if (m<=11) return "eleven minutes " + "<br>" +y +h;
    if (m<=12) return "twelve minutes " + "<br>" +y +h;
    if (m<=13) return "thirteen minutes " + "<br>" +y +h;
    if (m<=14) return "fourteen minutes " + "<br>" +y +h;
    if (m<=15) return "quarter " + "<br>" +y +h;
    if (m<=16) return "sixteen minutes " + "<br>" +y +h;
    if (m<=17) return "seventeen minutes " + "<br>" +y +h;
    if (m<=18) return "eighteen minutes " + "<br>" +y +h;
    if (m<=19) return "nineteen minutes " + "<br>" +y +h;

    if (m<=20) return "twenty " + "<br>" +y +h;
    if (m<=21) return "twenty one minutes " + "<br>" +y +h;
    if (m<=22) return "twenty two minutes " + "<br>" +y +h;
    if (m<=23) return "twenty three minutes " + "<br>" +y +h;
    if (m<=24) return "twenty four minutes " + "<br>" +y +h;
    if (m<=25) return "twenty five " + "<br>" +y +h;
    if (m<=26) return "twenty six minutes " + "<br>" +y +h;
    if (m<=27) return "twenty seven minutes" + "<br>" +y +h;
    if (m<=28) return "twenty eight minutes " + "<br>" +y +h;
    if (m<=29) return "twenty nine minutes " + "<br>" +y +h;

    if (m<=30) return "half "+ "<br>" +y +h;
    if (m<=31) return "twenty nine minutes "+ "<br>" +y +h;
    if (m<=32) return "twenty eight minutes "+ "<br>" +y +h;
    if (m<=33) return "twenty seven minutes "+ "<br>" +y +h;
    if (m<=34) return "twenty six minutes "+ "<br>" +y +h;
    if (m<=35) return "twenty five minutes "+ "<br>" +y +h;
    if (m<=36) return "twenty four minutes "+ "<br>" +y +h;
    if (m<=37) return "twenty three minutes "+ "<br>" +y +h;
    if (m<=38) return "twenty two minutes "+ "<br>" +y +h;
    if (m<=39) return "twenty one minutes "+ "<br>" +y +h;

    if (m<=40) return "twenty " + "<br>" +y +h;
    if (m<=41) return "nineteen minutes " + "<br>" +y +h;
    if (m<=42) return "eighteen minutes " + "<br>" +y +h;
    if (m<=43) return "seventeen minutes " + "<br>" +y +h;
    if (m<=44) return "sixteen minutes " + "<br>" +y +h;
    if (m<=45) return "quarter " + "<br>" +y +h;
    if (m<=46) return "fourteen minutes " + "<br>" +y +h;
    if (m<=47) return "thirteen minutes " + "<br>" +y +h;
    if (m<=48) return "twelve minutes " + "<br>" +y +h;
    if (m<=49) return "eleven minutes " + "<br>" +y +h;

    if (m<=50) return "ten minutes " + "<br>" +y +h;
    if (m<=51) return "nine minutes " + "<br>" +y +h;
    if (m<=52) return "eight minutes " + "<br>" +y +h;
    if (m<=53) return "seven minutes " + "<br>" +y +h;
    if (m<=54) return "six minutes " + "<br>" +y +h;
    if (m<=55) return "five " + "<br>" +y +h;
    if (m<=56) return "four minutes " + "<br>" +y +h;
    if (m<=57) return "three minutes " + "<br>" +y +h;
    if (m<=58) return "two minutes " + "<br>" +y +h;
    if (m<=59) return "one minute " + "<br>" +y +h;

    return "h:m"; // never reached?
    }
    function daytime(h) {
    if (!h || h>21) return "<br>" + " at night"
    if (h<12) return "<br>" + " in the morning";
    if (h<=17) return "<br>" + "in the afternoon";
    return "<br>" + " in the evening"; // default
    }

    function past_to(m) {
    if (!m || m>30) return "to "
    return "past "; // default
    }

    function words(h,m) {
    if (!h && !m) { // if no time supplied, use the system time
    time = new Date()
    h = time.getHours()
    m = time.getMinutes()
    }
    y = past_to(m);
    z = daytime(h);
    h = h % 12 // fix to 12 hour clock
    if (h>12) h = 1 // the clock turns round..
    if (h==0) h = 12
    return "<br>" +ttime(h,m)+z
    }

    </script>
    </head>
    <body onload="JavaScript:timedRefresh(5000);">
    <center>

    <span style="font-family:sans serif; font-weight:bold; color:#ff0000; font-size:20px">
    The time is
    <span style="font-family:sans serif; font-weight:bold; font-size:30px">
    <script language="JavaScript">document.write(words().fontcolor("#000000"))
    </script>

    </center>
    </body>

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there ukstormer,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>A clock but displayed in words</title>
    
    <style>
    body {
        background-color:#f0f0f0;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:100%;
     }
    #time {
        width:600px;
        line-height:38px;
        border:1px solid #999;
        margin:auto;
        color:#333;
        text-align:center;
        background-color:#fff;
        box-shadow:6px 6px 6px #999;
     }
    #time span {
        font-weight:bold;
        color:#000;
     }
    </style>
    
    <script>
       minutes= [
          '','<span>one<\/span>','<span>two<\/span>','<span>three<\/span>','<span>four<\/span>','<span>five<\/span>',
          '<span>six<\/span>','<span>seven<\/span>','<span>eight<\/span>','<span>nine<\/span>','<span>ten<\/span>',
          '<span>eleven<\/span>','<span>twelve<\/span>','<span>thirteen<\/span>','<span>fourteen<\/span>',
          '<span>fifteen<\/span>','<span>sixteen<\span>','<span>seventeen<\/span>','<span>eighteen<\/span>',
          '<span>nineteen<\/span>','<span>twenty<\/span>','<span>twenty one<\/span>','<span>twenty two<\/span>',
          '<span>twenty three<\/span>','<span>twenty four<\/span>','<span>twenty five<\/span>','<span>twenty six<\/span>',
          '<span>twenty seven<\/span>','<span>twenty eight<\/span>','<span>twenty nine<\/span>','','<span>twenty nine<\/span>',
          '<span>twenty eight<\/span>','<span>twenty seven<\/span>','<span>twenty six<\/span>','<span>twenty five<\/span>',
          '<span>twenty four<\/span>','<span>twenty three<\/span>','<span>twenty two<\/span>','<span>twenty one<\/span>',
          '<span>twenty<\/span>','<span>nineteen<\/span>','<span>eighteen<\/span>','<span>seventeen<\/span>',
          '<span>sixteen<\/span>','<span>fifteen<\/span>','<span>fourteen<\/span>','<span>thirteen<\/span>',
          '<span>twelve<\/span>','<span>eleven<\/span>','<span>ten<\/span>','<span>nine<\/span>','<span>eight<\/span>',
          '<span>seven<\/span>','<span>six<\/span>','<span>five<\/span>','<span>four<\/span>','<span>three<\/span>',
          '<span>two<\/span>','<span>one<\/span>'
           ];
       hours=[
          '<span>twelve<\/span>','<span>one<\/span>','<span>two<\/span>','<span>three<\/span>','<span>four<\/span>',
          '<span>five<\/span>','<span>six<\/span>','<span>seven<\/span>','<span>eight<\/span>','<span>nine<\/span>',
          '<span>ten<\/span>','<span>eleven<\/span>',''
           ];
       nmae=[
          ' at night',' in the morning',' in the afternoon',' in the evening'
           ];
    
    function init(){
    
       obj=document.getElementById('time');
    
       n=new Date();
       h=n.getHours();
       m=n.getMinutes();
    
    if(m==59) {
      when=' minute to ';
     }
    if(m<59) {
      when=' minutes to ';
     }
    if(m==30) {
      when=' half past ';
     }
    if(m<30) {
      when=' minutes past ';
     }
    if(m==1){
      when=' minute past ';
     }
    if(m==0){
      when='';
     }
    if(m>30){
       h=h+1;
     }
    if(h<=24) { 
       period=nmae[3];
       a=12;
     } 
    if(h<18) { 
       period=nmae[2];
       a=12;
     } 
    if(h<=12) {
    if(m>30){
       period=nmae[1];
       a=0;
     }
    else{
       period=nmae[2];
       a=0;
      }
     }
    if(h<6)  { 
       period=nmae[0];
       a=0;
     }
    if((h==0)&&(m==0)){
       obj.innerHTML='The time is <span>12<\/span> midnight.';
     }
    else {
    if((h==12)&&(m==0)){
       obj.innerHTML='The time is <span>12<\/span> noon.';
     }
    else {
       obj.innerHTML='The time is '+minutes[m]+when+hours[h-a]+' o\'clock'+period+'.';
      }
     }
       setTimeout(function(){init()},1000);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="time"></div>
    
    </body>
    </html>
    
    coothead

  7. #7
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Many thanks for the help Coothead.

    The code was very close to what I am after and I have made a few minor amendments.

    I decided against the top line of 'The time is'
    I have added line breaks to each section.
    I have added code for 'to' 'from' on the hours line and removed the words from the main body.
    I have removed the generic o'clock and coded for just on the hour.
    Added styling to adjust the size of the hours and minutes words.

    Here is the new code, maybe still have the odd bug in it but looking good to me.

    Code:
              <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>A clock but displayed in words</title>
    
    <style>
    body {
        background-color:#f0f0f0;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:100%;
     }
    #time {
        width:380px;
        line-height:30px;
        border:1px solid #999;
        margin:auto;
        color:#333;
        text-align:right;
        background-color:#fff;
        box-shadow:4px 4px 4px #666;
     }
    #time span {  
        font-weight:bold;
        font-size:200%;
        color:#000;
     }
    
    </style>
    
    <script type="text/javascript">
       minutes= [
          '','<span>one<\/span> minute','<span>two<\/span> minutes','<span>three<\/span> minutes','<span>four<\/span> minutes',
          '<span>five<\/span> minutes','<span>six<\/span> minutes','<span>seven<\/span> minutes','<span>eight<\/span> minutes',
          '<span>nine<\/span> minutes','<span>ten<\/span> minutes','<span>eleven<\/span> minutes','<span>twelve<\/span> minutes',
          '<span>thirteen<\/span> minutes','<span>fourteen<\/span> minutes','<span>fifteen<\/span> minutes',
          '<span>sixteen <\/span> minutes','<span>seventeen <\/span> minutes','<span>eighteen <\/span> minutes',
          '<span>nineteen<\/span> minutes','<span>twenty<\/span> minutes','<span>twenty one<\/span> minutes',
          '<span>twenty two<\/span> minutes','<span>twenty three<\/span> minutes','<span>twenty four<\/span> minutes',
          '<span>twenty five minutes','<span>twenty six minutes','<span>twenty seven minutes',
          '<span>twenty eight<\/span> minutes','<span>twenty nine<\/span> minutes','<span> half<\/span>',
          '<span>twenty nine<\/span> minutes','<span>twenty eight<\/span> minutes','<span>twenty seven<\/span> minutes',
          '<span>twenty six<\/span> minutes','<span>twenty five<\/span> minutes','<span>twenty four<\/span> minutes',
          '<span>twenty three minutes','<span>twenty two minutes','<span>twenty one minutes',
          '<span>twenty<\/span> minutes','<span>nineteen<\/span> minutes','<span>eighteen<\/span> minutes',
          '<span>seventeen<\/span> minutes','<span>sixteen<\/span> minutes','<span>quarter<\/span>',
          '<span>fourteen<\/span> minutes','<span>thirteen<\/span> minutes','<span>twelve<\/span> minutes','<span>eleven<\/span> minutes',
          '<span>ten<\/span> minutes','<span>nine<\/span> minutes','<span>eight<\/span> minutes','<span>seven<\/span> minutes',
          '<span>six<\/span> minutes','<span>five<\/span> minutes','<span>four<\/span> minutes','<span>three<\/span> minutes',
          '<span>two<\/span> minutes','<span>one<\/span> minute'
           ];
       hours=[
          '<span> twelve<\/span>','<span> one<\/span>','<span> two<\/span>','<span> three<\/span>','<span> four<\/span>' ,
          '<span> five<\/span>','<span> six<\/span>','<span> seven<\/span>','<span> eight<\/span>','<span> nine<\/span>',
          '<span> ten<\/span>','<span> eleven<\/span>'
           ];
       nmae=[
          ' at night',' in the morning',' in the afternoon',' in the evening'
           ];
    
    function past_to(m) {
    if (!m || m>30) return  "to "
    return "past "; // default 
    }
    
    function oclock (m) {
    if (m<=1 || m>59) return " o'clock";
    return "" ; // default
    }
    function init(){
    
       obj=document.getElementById('time');
    
       n=new Date();
       h=n.getHours();
       m=n.getMinutes();
    
    if(h<24) { period=nmae[3];a=12} 
    if(h<18) { period=nmae[2];a=12} 
    if(h<12) { period=nmae[1];a=0} 
    if(h<6)  { period=nmae[0];a=0}
    
    if((h==0)&&(m==0)){
       obj.innerHTML='<span>12<\/span> midnight.';
     }
    else {
    if((h==12)&&(m==0)){
       obj.innerHTML='<span>12<\/span> noon.';
     }
    else {
       obj.innerHTML="" +minutes[m]+ "<br>" +past_to(m) +hours[h-a] +oclock(m) + "<br>" +period+''; }
     } 
    
    setTimeout(function(){init()},1000);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="time"></div>
    
    </body>
    </html>
    Once again thanks for the help.
    Last edited by ukstormer; 06-13-2012 at 06:04 AM.

  8. #8
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    The ones that have been posted seem needlessly lengthy. I've made a simple numbers to words clock here, that takes the words for the hours and minutes from a single array, and the array only counts from one to thirty.

    EDIT: I've added in the multi-line and font size changes. I'm not sure how you'd want to work "at night" etc. "in the morning" is anywhere from midnight to midday and then from midday to six as the afternoon, six to nine as evening and nine to midnight as at night... maybe. These are the time constraints I've worked to within the code.

    UPDATES:
    • Fixed error when displaying 0 minute times, now displays "one in the morning" as it should.
    • Added annotation
    • Added CSS Style that can be amended to an external stylesheet.


    PHP Code:
    <!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 id='Head1' runat='server'>
        <
    title>JavaScript Time To String Demo</title>
        <
    script type='text/javascript'>

            
    // Amends "s" to plurals
            
    function isPlural(ns) { if (1) { s+='s'; } return s; }

            
    // Array of numbers as words. For this script, we only need number 1 through 30.
            // NOTE: indices are always offset by -1 to their corrosponding string.
            
    var numbersAsWords = ['one''two''three''four''five''six''seven''eight''nine''ten''eleven''twelve''thirteen''fourteen''fifteen''sixteen''seventeen''eighteen''nineteen''twenty''twenty one''twenty two''twenty three, ''twenty four''twenty five''twenty six ''twenty seven''twenty eight''twenty nine''thirty'];

            
    // Converts the current time to a pre-formatted DIV tag
            // containing the time displayed as words.
            
    function timeToString() {

                
    // Gets the current time.
                
    var dTime = new Date();

                
    // Gathers necessary time informaton
                
    var hours dTime.getHours();
                var 
    minutes dTime.getMinutes();

                
    // Declares and initialise sub-strings
                
    var strConj 'past';
                var 
    amPM 'in the morning';

                
    // Converts 24 hour time to 12 hour time, using
                // the following times as periods of the day:
                //*********************************//
                //   Morning:   Midnight to Midday //
                // Afternoon:   Midday to 6PM      //
                //   Evening:   6PM to 9PM         //
                //     Night:   9PM to Midnight    //
                //*********************************//
                
    if (hours >= 12) {
                    
    hours hours 12;
                    
    amPM 'in the afternoon';
                    if (
    hours >= 6) {
                        
    amPM 'in the evening';
                        if (
    hours >= 9) {
                            
    amPM 'at night';
                        }
                    }
                }

                
    // Sets minutes to count down rather than up
                // after reaching half past the hour.
                
    if (minutes >= 30) {
                    
    minutes 60 - (minutes);
                    
    strConj 'to';
                    
    hours++;
                }

                
    // Creates the DIV element to return
                
    var displayDiv document.createElement('div');
                
    displayDiv.setAttribute('id''displayDiv');

                
    // Generates HTML Markup to return within displayDiv
                
    var strTimeAsWords = function () {
                    var 
    '';
                    if (!
    minutes == 0) {
                        
    += '<p><span class="emphasis">' numbersAsWords[minutes 1] + '</span>' ' ' isPlural(minutes'minute') + ' ' strConj '</p>';
                    }
                    
    += '<p><span class="emphasis">' numbersAsWords[hours 1] + '</span>' ' ' amPM '</p>';
                    return 
    s;
                }

                
    // Injects HTML into displayDiv
                
    displayDiv.innerHTML strTimeAsWords();

                
    // Returns the generated HTML code as a fully formed DIV tag.
                
    return displayDiv;
            }

            function 
    exampleUsage() {

                
    // Locates and replaces the dummy DIV on the page
                
    var el document.getElementById('timeDiv');
                
    document.body.replaceChild(timeToString(), el);

                
    // Recursive: Updates every second
                
    setTimeout(exampleUsage(), 1000);
            }

            
    // Adds an OnLoad event to the page.
            
    window.addEventListener('load'exampleUsagefalse);
        
    </script>

        <style type="text/css">
            
            /* TIME TO STRING CLASSES
            //-------------------------------------*/
            span.emphasis 
            {
                font-size: 2em;
            }
        </style>

    </head>
    <body>

        <div id='timeDiv'></div>

    </body>
    </html> 
    Last edited by ApacheTech; 06-13-2012 at 01:05 AM.

  9. #9
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Many thanks to all, between all the help have now got a great script working that looks cool.

  10. #10
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default A little bug

    Quote Originally Posted by ApacheTech View Post
    The ones that have been posted seem needlessly lengthy. I've made a simple numbers to words clock here, that takes the words for the hours and minutes from a single array, and the array only counts from one to thirty.

    EDIT: I've added in the multi-line and font size changes. I'm not sure how you'd want to work "at night" etc. "in the morning" is anywhere from midnight to midday and then from midday to six as the afternoon, six to nine as evening and nine to midnight as at night... maybe. These are the time constraints I've worked to within the code.

    UPDATES:
    • Fixed error when displaying 0 minute times, now displays "one in the morning" as it should.
    • Added annotation
    • Added CSS Style that can be amended to an external stylesheet.


    PHP Code:
    <!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 id='Head1' runat='server'>
        <
    title>JavaScript Time To String Demo</title>
        <
    script type='text/javascript'>

            
    // Amends "s" to plurals
            
    function isPlural(ns) { if (1) { s+='s'; } return s; }

            
    // Array of numbers as words. For this script, we only need number 1 through 30.
            // NOTE: indices are always offset by -1 to their corrosponding string.
            
    var numbersAsWords = ['one''two''three''four''five''six''seven''eight''nine''ten''eleven''twelve''thirteen''fourteen''fifteen''sixteen''seventeen''eighteen''nineteen''twenty''twenty one''twenty two''twenty three, ''twenty four''twenty five''twenty six ''twenty seven''twenty eight''twenty nine''thirty'];

            
    // Converts the current time to a pre-formatted DIV tag
            // containing the time displayed as words.
            
    function timeToString() {

                
    // Gets the current time.
                
    var dTime = new Date();

                
    // Gathers necessary time informaton
                
    var hours dTime.getHours();
                var 
    minutes dTime.getMinutes();

                
    // Declares and initialise sub-strings
                
    var strConj 'past';
                var 
    amPM 'in the morning';

                
    // Converts 24 hour time to 12 hour time, using
                // the following times as periods of the day:
                //*********************************//
                //   Morning:   Midnight to Midday //
                // Afternoon:   Midday to 6PM      //
                //   Evening:   6PM to 9PM         //
                //     Night:   9PM to Midnight    //
                //*********************************//
                
    if (hours >= 12) {
                    
    hours hours 12;
                    
    amPM 'in the afternoon';
                    if (
    hours >= 6) {
                        
    amPM 'in the evening';
                        if (
    hours >= 9) {
                            
    amPM 'at night';
                        }
                    }
                }

                
    // Sets minutes to count down rather than up
                // after reaching half past the hour.
                
    if (minutes >= 30) {
                    
    minutes 60 - (minutes);
                    
    strConj 'to';
                    
    hours++;
                }

                
    // Creates the DIV element to return
                
    var displayDiv document.createElement('div');
                
    displayDiv.setAttribute('id''displayDiv');

                
    // Generates HTML Markup to return within displayDiv
                
    var strTimeAsWords = function () {
                    var 
    '';
                    if (!
    minutes == 0) {
                        
    += '<p><span class="emphasis">' numbersAsWords[minutes 1] + '</span>' ' ' isPlural(minutes'minute') + ' ' strConj '</p>';
                    }
                    
    += '<p><span class="emphasis">' numbersAsWords[hours 1] + '</span>' ' ' amPM '</p>';
                    return 
    s;
                }

                
    // Injects HTML into displayDiv
                
    displayDiv.innerHTML strTimeAsWords();

                
    // Returns the generated HTML code as a fully formed DIV tag.
                
    return displayDiv;
            }

            function 
    exampleUsage() {

                
    // Locates and replaces the dummy DIV on the page
                
    var el document.getElementById('timeDiv');
                
    document.body.replaceChild(timeToString(), el);

                
    // Recursive: Updates every second
                
    setTimeout(exampleUsage(), 1000);
            }

            
    // Adds an OnLoad event to the page.
            
    window.addEventListener('load'exampleUsagefalse);
        
    </script>

        <style type="text/css">
            
            /* TIME TO STRING CLASSES
            //-------------------------------------*/
            span.emphasis 
            {
                font-size: 2em;
            }
        </style>

    </head>
    <body>

        <div id='timeDiv'></div>

    </body>
    </html> 
    Hi,

    I have just found a bug in the code, when the time is 'x' minutes past 12 it says 'undefined' where the twelve should be, any ideas ?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •