Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 35

Thread: A clock but displayed as words

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

    Default

    Thanks for the info, so now created 4 files, HTML, 2 x Javascript and a CSS

    clock_date.html
    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript" src="time.js"></script>
    <script type="text/javascript" src="date.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <Title> Time and Date as Words </title>
    </head>

    <body onload="JavaScript:timedRefresh(10000);">
    <div id="timeDiv"></div>
    <div id="dateDiv"></div>
    </body>
    </html> 
    time.js
    PHP Code:
    // Time as Words       
            
    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); 
    date.js
    PHP Code:
    // Date as Words

    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> 
    styles.css
    PHP Code:
    span.basic 
    {
        
    font-family:LubalGraph Bd BT
        
    color:#EA3030;
        
    font-weight:normal;
        
    font-size40px;
    }
          
    span.emphasis 
    {
        
    font-family:LubalGraph Bd BT
        
    color:#EA3030;
        
    font-size80px;
    }   
            
    #timeDiv
    {
        
    positionabsolute;
        
    left50px;
        
    top50px;


    #dateDiv
    {
        
    positionabsolute;
        
    right0;
        
    bottom0;
    }

    body
    {
        
    background-imageurl(image.jpg); 
        
    background-repeatno-repeat;     
        
    background-positionleft top;  

    I get the time OK but no date, I know the css is linking as I see the background and can change the font size and it updates OK, when I change anything in the timeDiv part of css nothing happens, nearly there and the code is looking neater with separate files but why no date, suspect it is the way the javascript is outputting the results as I can see the link in the timeDiv.

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

    Default

    If it was all working before then this should work. I don't have my test platform VM open atm and it'll take a while to load up, but if you need it thoroughly testing, I can do.

    As you seem to know your way around the code now as well, I've taken the training wheels off.

    js/scripts.js
    PHP Code:
    function isPlural(ns) { if (1) { s+='s'; } return s; }

    function 
    dateToString() {
        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>'
        
    return this_date_string;


    function 
    timeToString() {

        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'];
        var 
    Time = new Date();

        var 
    hours Time.getHours();
        var 
    minutes Time.getMinutes();

        var 
    strConj ' past ';
        var 
    amPM 'in the morning';
        var 
    oclock '  ';   //default
        
        
    if (minutes >= 30) {
            
    minutes 60 - (minutes);
            
    strConj ' to ';
            
    hours++;
        }
        if (
    minutes || minutes 59) {
            
    oclock ' o clock '
         }

        
    /**
        * 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;   
        } 

        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;
        }
        
        return 
    strTimeAsWords;
    }

    function 
    autoRefreshTimeAndDate(timeoutPeriod) {

        
    setTimeout(function () {
              
            var 
    timeDiv document.getElementById('timeDiv');
            var 
    dateDiv document.getElementById('dateDiv');
            
    timeDiv.innerHTML timeToString();
            
    dateDiv.innerHTML dateToString();
        
        },
    timeoutPeriod);
    }        

    window.addEventListener('load'autoRefreshTimeAndDate(10000), false); 
    css/styles.css:
    PHP Code:
    /**
    * Page Styles
    */

    *, html {
        
    padding0;
        
    margin0;
    }

    body
    {
        
    background-imageurl('../img/image.jpg'); 
        
    background-repeatno-repeat;     
        
    background-positionleft top;  


    /**
    * Date and Time Syles
    */

    #timeDiv
    {
        
    positionabsolute;
        
    left50px;
        
    top50px;


    #dateDiv
    {
        
    positionabsolute;
        
    right0;
        
    bottom0;


    span.basic 
    {
        
    font-family"LubalGraph Bd BT"
        
    color#EA3030;
        
    font-weight :normal;
        
    font-size40px;
    }
          
    span.emphasis 
    {
        
    font-family"LubalGraph Bd BT"
        
    color#EA3030;
        
    font-size80px;
    }

    /**
    * Other CSS Here
    */ 

    index.html
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title></title>
    	<script src="js/scripts.js" type="text/javascript"></script>
    	<link href="css/styles.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body>
    	<div id="timeDiv"></div>
    	<div id="dateDiv"></div>
    </body>
    </html>
    I've introduced some basic site structure in it. Your site folder and file structure should now be (for purposes of this example):

    • /
    • /css/
    • /css/styles.css
    • /img/
    • /img/image.jpg
    • /js/
    • /js/scripts.js
    • /index.html


    Setting up a basic structure like this will help you in future to organise your site for when you need some more of the advanced features. I hope this makes sense.

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

    Default

    Thanks again for all your help, I have now organised all the files in the correct folders.

    Regards the styling I have never had any styling regards the div position working, the only style I was using was the div align, will keep on playing around and reading my books.

    Also had to go back to this to get the date to show
    PHP Code:
    <div>
    <
    script language="JavaScript">document.write(this_date_string)</script>
    </div> 
    I know it is to do with the document write and getting it to reference the div ID.

    Onwards and Upwards as they say

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

    Default

    I've just had a detailed look through the Javascript and I've found some errors.

    For this demo I've introduced JQuery. It's a library of Javascript functions that make coding JS a lot easier.

    js/scripts.js:
    PHP Code:
    function isPlural(ns) { if (1) { s+='s'; } return s; }

    function 
    dateToString() {
        var 
    aDates = ["","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"];
        var 
    aMonths = ["january","february","march","april","may","june","july","august","september","october","november","december"];
        var 
    dDate = new Date();
        
        var 
    iDate dDate.getDate();
        var 
    iMonth dDate.getMonth();
        var 
    iYear dDate.getFullYear();

        var 
    sDate  '<span class="emphasis">' aDates[iDate] + '</span>' '<br />' '<span class="basic">' ' of ' '</span>' '<span class="emphasis">' aMonths[iMonth] + '</span>' '<span class="basic">' iYear '</span>'
            
        
    return sDate;
    }

    function 
    timeToString() {

        var 
    aNumbers = ['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'];
        var 
    dTime = new Date();

        var 
    iHours Time.getHours();
        var 
    iMinutes Time.getMinutes();

        var 
    sConj ' past ';
        var 
    sAmPm 'in the morning';
        var 
    sOClock '  ';   //default
        
        
    if (iMinutes >= 30) {
            
    iMinutes 60 - (minutes);
            
    sConj ' to ';
            
    iHours++;
        }
        if (
    iMinutes || iMinutes 59) {
            
    sOClock " o'clock "
         }

        
    /**
        * Morning: Midnight to Midday 
        * Afternoon: Midday to 6PM      
        * Evening: 6PM to 9PM         
        * Night: 9PM to Midnight    
        */
        
    if (iHours 12) { 
            
    iHours -= 12
            
    sAmPm 'in the afternoon'
            if (
    iHours >= 6) { 
                
    sAmPm 'in the evening'
                if (
    iHours >= 9) { 
                    
    sAmPm 'at night'
                } 
            } 
        } else if (
    iHours == 12) { 
            
    sAmPm 'in the morning'
        } else if (
    iHours == 0) { 
            
    iHours 12;   
        } 

        var 
    sTime = function () {
            var 
    '';
            if (!
    iMinutes == 0) {
                
    += '<p><span class="emphasis">' aNumbers[iMinutes 1] + ' ' '</span>' '<span class="basic">' isPlural(iMinutes'minute') + ' </br> ' sConj '</span>' ' ';
            }
            
    += '<span class="emphasis">' +  aNumbers[iHours 1]  + sOClock '</span>';
            return 
    s;
        }
        return 
    sTime;
    }

    jQuery(function($) {
        
    setInterval(function () {
            $(
    "timeDiv").html(timeToString());
            $(
    "dateDiv").html(dateToString());
        },
    10000);
    }); 
    And then you'll need to add the link to the JQuery library. Here, I'm using a fail-safe method for the script above, and I'm letting Google host the JQuery library.

    index.html:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/scripts.js" type="text/javascript"></script>
        <link href="css/styles.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body>
    	<div id="timeDiv"></div>
    	<div id="dateDiv"></div>
    </body>
    </html>
    The JQuery link.src here may seem weird. It's what's known as a "protocol-less" url. This means that it will detect if you are using HTTP or HTTPS and use the same protocol.

    The CSS file will remain the same as the previous post, as will the site structure.

    This is a much better way of doing it than the previous method.
    Last edited by ApacheTech; 07-03-2012 at 05:55 PM. Reason: Changed setTimeout to setInterval in Javascript

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

    Default

    Many thanks for the quick response, I will have a look at it tomorrow.

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

    Default

    I hope it's all right now. Bug fixing can be a nightmare.

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

    Default

    Quote Originally Posted by ApacheTech View Post
    I hope it's all right now. Bug fixing can be a nightmare.
    I don't know if I am missing something but the code above does not work at all, I only see the background image ?

  8. #28
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Same for me, no clock in site
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

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

    Default

    I went back to my original code and regards the date added the following in the HTML
    PHP Code:
    <body onload="JavaScript:timedRefresh(10000);">
    <
    div id="timeDiv"></div>
    <
    div id="dateDiv">  //new line
    <script language="JavaScript">document.write(this_date_string)</script> 
    </div>
    </body> 
    I can now adjust the absolute position of the date.

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

    Default

    Thought I would show what I am trying to achieve. This is an old laptop and I am now stripping it down and going to mount the screen in a frame to make a wall clock, next would be to maybe make a photo gallery as the background rather than just 1 image. Got everything working but some of the code is poor, working on that though. System is Linux and chrome (great as natively supports full screen mode)

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
  •