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