A clock but displayed as words

**ukstormer** · 07-03-2012, 03:52 PM

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(n, s) { if (n > 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 < 1 || 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 s = '';

                if (!minutes == 0) {

                    s += '<p><span class="emphasis">' + numbersAsWords[minutes - 1] + ' ' + '</span>' + '<span class="basic">' + isPlural(minutes, 'minute') + ' </br> ' + strConj + '</span>' + ' ';

                }

                s += '<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', exampleUsage, false);

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-size: 40px;

}

      

span.emphasis 

{

    font-family:LubalGraph Bd BT; 

    color:#EA3030;

    font-size: 80px;

}   

        

#timeDiv

{

    position: absolute;

    left: 50px;

    top: 50px;

} 



#dateDiv

{

    position: absolute;

    right: 0;

    bottom: 0;

}



body

{

    background-image: url(image.jpg); 

    background-repeat: no-repeat;     

    background-position: left 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.

**ApacheTech** · 07-03-2012, 04:46 PM

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(n, s) { if (n > 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 < 1 || 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 s = '';

        if (!minutes == 0) {

            s += '<p><span class="emphasis">' + numbersAsWords[minutes - 1] + ' ' + '</span>' + '<span class="basic">' + isPlural(minutes, 'minute') + ' </br> ' + strConj + '</span>' + ' ';

        }

        s += '<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 {

    padding: 0;

    margin: 0;

}



body

{

    background-image: url('../img/image.jpg'); 

    background-repeat: no-repeat;     

    background-position: left top;  

} 



/**

* Date and Time Syles

*/



#timeDiv

{

    position: absolute;

    left: 50px;

    top: 50px;

} 



#dateDiv

{

    position: absolute;

    right: 0;

    bottom: 0;

} 



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;

}



/**

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

**ukstormer** · 07-03-2012, 05:38 PM

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

**ApacheTech** · 07-03-2012, 05:49 PM

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(n, s) { if (n > 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 < 1 || 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 s = '';
        if (!iMinutes == 0) {
            s += '<p><span class="emphasis">' + aNumbers[iMinutes - 1] + ' ' + '</span>' + '<span class="basic">' + isPlural(iMinutes, 'minute') + ' </br> ' + sConj + '</span>' + ' ';
        }
        s += '<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.

**ukstormer** · 07-03-2012, 06:04 PM

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

**ApacheTech** · 07-03-2012, 06:16 PM

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

**ukstormer** · 07-04-2012, 08:55 AM

Originally Posted by ApacheTech

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 ?

**bernie1227** · 07-04-2012, 12:32 PM

Same for me, no clock in site

**ukstormer** · 07-04-2012, 12:52 PM

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.

**ukstormer** · 07-04-2012, 02:46 PM

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)

Thread: A clock but displayed as words

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions