It's quite a simple task, I would like to split the week day name and have its own style but the join the year with the date.
So like it shows Fri-26-04 below the clock. I would like it to show 26-04-2013 with Friday below the date.
This is the code...
So like it shows Fri-26-04 below the clock. I would like it to show 26-04-2013 with Friday below the date.
This is the code...
Code:
<?xml version="1.0" encoding="UTF-16"?>
<html>
<head>
<style>
body{
background:url('wall.jpg');
background-size:320px 480px;
background-repeat:no-repeat;
font-family:Helvetica;
color:#ffffff;
}
SPAN#clock{
position:absolute
text-align:center;
font-family:Helvetica;
// font-weight:bold;
letter-spacing:0.0em;
color:rgba(255,255,255,1);
-webkit-mask-box-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(0.6773,white));
text-shadow:0px 2px 10px black;
font-size:50px;
}
TD#date{
position:absolute;
font-family:Helvetica;
text-align:center;
color:rgba(255,255,255,1);
-webkit-mask-box-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(0.6773,white));
-webkit-box-shadow:0 0 5px #000;
text-shadow:0px -1px 0px rgba(0, 0, 0, 0.7);
font-size:18px;
}
TD#date1{
font-family:Helvetica;
font-weight:bold;
text-align:left;
color:#ffffff;
text-shadow:0px -1px 0px rgba(0, 0, 0, 0.7);
font-size:150px;
text-transform:uppercase;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="JavaScript" type="text/javascript">
function updateClock ( ){
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
var timeOfDay = ( currentHours < 24 ) ? "AM" : "PM";
currentHours = ( currentHours > 24 ) ? currentHours - 12 : currentHours;
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
var currentTimeString = currentHours + ":" + currentMinutes;
var currentTimeString2 = currentSeconds;
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
function calendarDate ( ){
var this_date_name_array = new Array ("0", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23","24","25","26","27","28","29","30","31")
var this_weekday_name_array = new Array("SUN","MON","TUE","WED","THU","Fri","SAT")
var this_month_name_array = new Array("JAN","FEB","MAR","04","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC")
var this_date_timestamp = new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()
if (this_year < 1000)
this_year+= 1900;
if (this_year==101)
this_year=2001;
document.getElementById("date").firstChild.nodeValue = this_weekday_name_array[this_weekday] + "-" + this_date_name_array[this_date] + "-" + this_month_name_array[this_month]//concat long date string
document.getElementById("calendar_year").firstChild.nodeValue = this_year;
}
</script>
</head>
<body>
<div id="line"></div>
<table style="position: absolute;top: 60px; left: 0px; width: 320px; height: 461px;align: center; opacity: 1.0; z-index: 14;">
<tr align="center" valign="top" border="0" cellpadding="0">
<td valign="top">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span>
</td>
</tr>
</table>
<table style="position: absolute;top: 120px; left: 0px; width: 321px; height: 481px;align: center; z-index: 14;">
<tr>
<td id="date" valign="top">
<span id="calendar">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
</span>
</td>
</tr>
</table>
<table style="position: absolute;top: 0px; left: 0px; width: 321px; height: 481px;">
<tr>
<td id="date1" valign="top" td style="font-weight: 500; color: #silver; text-shadow: #a1a1a1 0px 1px 1.5px; font-size: 30px; text-align: center">
<span id="calendar_year">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
</span>
</td>
</tr>
</table>
</body>
<body>
<html>
<head><title>weather</title>
</body>
</html>
</html>