Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 35

Thread: A clock but displayed as words

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

    Default

    Try this:

    FIND:

    PHP Code:
                if (hours >= 12) { 
    REPLACE WITH:

    PHP Code:
                if (hours 12) { 
    If that doesn't work, revert the correction and try the following instead:

    FIND:

    PHP Code:
                    hours hours 12
    REPLACE WITH:

    PHP Code:
                    hours -= 11
    One of these should work. If not, let me know and I'll debug it further.
    Last edited by ApacheTech; 06-20-2012 at 02:57 PM. Reason: Added alernative fix.

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

    Default

    Quote Originally Posted by ApacheTech View Post
    Try this:

    FIND:

    PHP Code:
                if (hours >= 12) { 
    REPLACE WITH:

    PHP Code:
                if (hours 12) { 
    This resolved the initial problem but after 12:29 it goes to 30m to 13

    If that doesn't work, revert the correction and try the following instead:

    FIND:

    PHP Code:
                    hours hours 12
    REPLACE WITH:

    PHP Code:
                    hours -= 11
    I reverted the code and replaced with this one, 11:30 was OK, 29m to 12 was OK but at 12 it flipped to 1
    One of these should work. If not, let me know and I'll debug it further.
    nearly there

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

    Default

    Fixed. (hopefully)

    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>JavaScript Time To String Demo</title>
        <
    script type='text/javascript'>

            
    // Amends "s" to plurals
            
    function isPlural(ns) { if (1) { += '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();

                
    // dTime.setHours(23, 59, 59, 999); // DEBUG OVERRIDE

                // 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';

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

                
    // 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 -= 12;
                    
    amPM 'in the afternoon';
                    if (
    hours >= 6) {
                        
    amPM 'in the evening';
                        if (
    hours >= 9) {
                            
    amPM 'at night';
                        }
                    }
                } else if (
    hours == 12) {
                    
    amPM 'in the morning';
                } else if (
    hours == 0) {
                    
    hours 12;  
                }

                
    // 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> 
    I've tested this with as many awkward times as I can, and it works how it should. Give us a shout if there's anything else.

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

    Default

    Many thanks, I have checked as many options all seems right.

    As I have said before I am not a java programmer but love playing around and learning through what others have done, my one problem is apart from just running the code in a browser that seems to either work or not is there a program I can use to see where the code is stopping and thus I could better understand java.

    Many thanks again fro all you help.

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

    Default

    I use Visual Studio 2010 Professional. It has JavaScript intellisense and a good debugger.

    You can download Visual Studio 2010 Express (The free version of what I use) from:

    http://www.microsoft.com/visualstudi...eloper-express

    Other people may be able to give advice on other IDEs; VS2010 has everything I could need for Web Development, but it doesn't seem to be widely liked for some reason.

  6. The Following User Says Thank You to ApacheTech For This Useful Post:

    ukstormer (06-21-2012)

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

    Default

    Hi Again,

    The code is working great and I have altered the style to a specific text for the main elements and make the actual minutes and hours twice as large as the words around them, the problem now is I want to be able to position the div absolutely, I have done this OK with the Date as Words as that uses the 'document.write' and I have styled the div marker, with the Time as Words not using this method I am not sure how I would position the div.

    Many thanks

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

    Default

    Please post a link to what you now have
    Thanks,

    Bud

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

    Default

    This is the code so far, I am using an old laptop that has been stripped down and put into a photo frame and I am trying to create an unusual wall clock.

    PHP Code:
    <html>
    <
    head>
    <
    Titletime </title>
      <
    script type='text/javascript'>   
      <!--
            function 
    timedRefresh(timeoutPeriod) {
              
    setTimeout("location.reload(true);",timeoutPeriod);
    }
            
    // 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 Time = new Date();

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

                
    // Declares and initialise sub-strings
                
    var strConj ' past ';
                var 
    amPM 'in the morning';
                var 
    oclock '  ';   //default
                
                 // Sets minutes to count down rather than up
                // after reaching half past the hour.
                
    if (minutes >= 30) {
                    
    minutes 60 - (minutes);
                    
    strConj ' to ';
                    
    hours++;
                }
                if (
    minutes || minutes 59) {
                    
    oclock ' o clock '
                 }
                   
                
    // 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 -= 12
                    
    amPM 'in the afternoon'
                    if (
    hours >= 6) { 
                        
    amPM 'in the evening'
                        if (
    hours >= 9) { 
                            
    amPM 'at night'
                        } 
                    } 
                } else if (
    hours == 12) { 
                    
    amPM 'in the morning'
                } else if (
    hours == 0) { 
                    
    hours 12;   
                } 

                
    // 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>' '<span class="basic">' isPlural(minutes'minute') + ' </br> ' strConj '</span>' ' ';
                    }
                    
    += '<span class="emphasis">' +  numbersAsWords[hours 1]  + ' ' oclock ' ' '</span>' ' ' ;
                    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);
                  
            }        

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

        <style type="text/css">
            
            /* TIME TO STRING CLASSES
            //-------------------------------------*/
             span.basic 
            {
                font-family:LubalGraph Bd BT; 
                color:#EA3030;
                font-weight:normal;
                font-size: 40px;
            }
          
             span.emphasis 
            {
                font-family:LubalGraph Bd BT; 
                color:#EA3030;
                font-size: 80px;
            }
          
        </style>
        <Title> date </title>
    <style type="text/css">
    body
    {
    background-image: url(image.jpg); 
    background-repeat: no-repeat;     
    background-position: left top;  
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>date</title>
    <script language="Javascript">
    <!--
    function timedRefresh(timeoutPeriod) {
        setTimeout("location.reload(true);",timeoutPeriod);
    }
    //   -->
    var this_date_words_array = new Array ("","first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth","eleventh","twelfth","thirteenth","fourteenth","fifteenth","sixteenth","seventeenth","eighteenth","nineteenth","twentieth","twenty-first","twenty-second","twenty-third","twenty-fourth","twenty-fifth","twenty-sixth","twenty-seventh","twenty-eighth","twenty-ninth","thirtieth","thirty-first")//date as words
    var this_month_name_array = new Array("january","february","march","april","may","june","july","august","september","october","november","december") //month names

    var this_date_timestamp=new Date()    //get current day-time stamp

    var this_date_words = this_date_timestamp.getDate()    //extract day of month
    var this_month = this_date_timestamp.getMonth()    //extract month
    var this_year = this_date_timestamp.getFullYear()    //extract year


    var this_date_string = '<span class="emphasis">' +  this_date_words_array[this_date_words] + '</span>' + '</br>' + '<span class="basic">' + ' of ' + '</span>' + '<span class="emphasis">' + this_month_name_array[this_month] + '</span>' + '<span class="basic">' + ' ' + this_year + '</span>' //concat long date string</p>
    </script>

    </head>
    <body onload="JavaScript:timedRefresh(10000);">
    <div id="timeDiv"></div>
    <div align="right">
    <script language="JavaScript">document.write(this_date_string)</script>
    </div>
    </body>
    </html> 
    I am looking to position the time and date at the bottom of the screen, the time on the left and date on the right.

    Thanks

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

    Default

    Don't use align="" to align your code. Use CSS instead. Align has been depreciated and will not validate.

    Here is enough to get you started.

    CSS:

    PHP Code:
    #dateDiv
    {
        
    positionabsolute;
        
    left0;
        
    bottom0;
    }

    #timeDiv
    {
        
    positionabsolute;
        
    right0;
        
    bottom0;

    Basic HTML:

    HTML Code:
    <div id="dateDiv"></div>
    <div id="timeDiv"></div>

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

    Default

    Also, you may want to move all your Javascript and CSS into separate files and link them from the <head> of your page. External CSS and JS files will make your code a lot more manageable.

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
  •