A clock but displayed as words

**ApacheTech** · 06-20-2012, 02:39 PM

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.

**ukstormer** · 06-20-2012, 03:47 PM

Originally Posted by ApacheTech

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

**ApacheTech** · 06-20-2012, 05:49 PM

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(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 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 s = '';

                if (!minutes == 0) {

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

                }

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

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

**ukstormer** · 06-20-2012, 06:50 PM

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.

**ApacheTech** · 06-20-2012, 07:54 PM

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.

**ukstormer** · 07-03-2012, 07:53 AM

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

**ajfmrf** · 07-03-2012, 12:46 PM

Please post a link to what you now have

**ukstormer** · 07-03-2012, 02:26 PM

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>
<Title> time </title>
  <script type='text/javascript'>   
  <!--
        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);        
    </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

**ApacheTech** · 07-03-2012, 02:53 PM

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
{
    position: absolute;
    left: 0;
    bottom: 0;
}

#timeDiv
{
    position: absolute;
    right: 0;
    bottom: 0;
}

Basic HTML:

HTML Code:

<div id="dateDiv"></div>
<div id="timeDiv"></div>

**ApacheTech** · 07-03-2012, 02:56 PM

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.

Thread: A clock but displayed as words

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions