Login

poecki · 30.09.2011, 22:13

hey
ich habe hier ein theme:
https://iszene.com/uploads/8fojnfojgfguy0335gj.png

ich würde gerne das datum und den monatsnamen untereinander haben. habe aber keine ahnung wie ich das machen soll. hier der gesamte clock.html code
ein stylesheet braucht man nicht

Code:
<html><head>

    <script type="text/javascript">

function init ( )

{

  timeDisplay = document.createTextNode ( "" );

  document.getElementById("clock").appendChild ( timeDisplay );

}

function updateClock ( )

{

  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );

  var currentMinutes = currentTime.getMinutes ( );

  var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required

  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate

  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed

  currentHours = ( currentHours > 24 ) ? currentHours - 24 : currentHours;

  // Convert an hours component of "0" to "12"

  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display

  var currentTimeString = currentHours + ":" + currentMinutes;

  // Update the time display

  document.getElementById("clock").firstChild.nodeValue = currentTimeString;

}

function init2 ( )

{

  timeDisplay = document.createTextNode ( "" );

  document.getElementById("ampm").appendChild ( timeDisplay );

}

function init3 ( )

{

  timeDisplay = document.createTextNode ( "" );

  document.getElementById("calendar").appendChild ( timeDisplay );

}

function calendarDate ( )

{

var this_weekday_name_array = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag")

var this_month_name_array = new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember")//predefine month names

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;

var month = this_date_timestamp.getMonth();

document.getElementById("weekday").firstChild.nodeValue = this_weekday_name_array[this_weekday] //concat long date string

document.getElementById("date").firstChild.nodeValue = this_month_name_array[this_month] + ", " + this_date //concat long date string

}

</script>

    <style>

        body {

            background-image:url(../weather_preview1.png);

            background-repeat:no-repeat;

            padding: 0px 0 0 0;

            height: 480px;

            width: 320px;

        }

SPAN#clock 

{

    font-family: Helvetica;

    font-weight: 300; 

    text-align: center;

    color: white;

     text-shadow: 0px 0px 3px black; 

    font-size: 20px;

    text-transform: Capitalize;   

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

}

    SPAN#weekday 

{

       font-family: Helvetica;

     text-transform: Capitalize; 

       text-align: center;

     font-size: 14px;

     font-weight: 200; 

       color: white;

     text-shadow: 0px 0px 2px black; 

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

}

    SPAN#date 

{

       font-family: Helvetica;

     text-transform: Capitalize; 

       text-align: center;

     font-size: 14px;

     font-weight: 200; 

       color: white;

     text-shadow: 0px 0px 2px black; 

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

}

    </style>

</head>

<body>

<table>

<tr>

    <td>

<table style="position: absolute;top: 116px; left: -14px; width: 321px; height: 481px;">

<tr align="right" valign="top"  border="0" cellpadding="0">

    <td height="12" valign="top" margin-left="20" >

<span id="clock">

<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script>

</span>

<td></td>

</tr>

</table>

<table style="position: absolute;top: 160px; left: 24px; width: 321px; height: 481px;">

<tr align="left" valign="top"  border="0" cellpadding="0">

    <td height="12" valign="top" margin-left="20" >

<span id="weekday">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

<td></td>

</tr>

</table>

<table style="position: absolute;top: 160px; left: 112px; width: 321px; height: 481px;">

<tr align="center" valign="top"  border="0" cellpadding="0">

    <td height="12" valign="top" margin-left="20" >

<span id="date">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

<td></td>

</tr>

</table>

<img src="Layer.png" height="480" width="320" style="position: absolute; top: 0px; left: 0px; z-index:-10;">

<img src="Overlay.png" height="480" width="320" style="position: absolute; top: 0px; left: 0px; z-index:-10;">

<span id="calendar" align=right>

    <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

    </span>

    <span id="clock">

    <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span> <span id="ampm">

    </span>

    <object data="Private/WeatherWidget/WeatherWidget.html"  type="text/html" height="480" width="320" style="left:0px">

       <p>Place WeatherWidget in Subthemes</p>

    </object>

</body></html>

oldster · 01.10.2011, 08:10

Hi poecki,
so wie dein code aufgebaut ist, geht's leider gar nicht:
document.getElementById("date").firstChild.nodeValue = this_month_name_array[this_month] + ", " + this_date

Du müsstest für this_date eine eigene ID vergeben die Du dann frei positionieren kannst. Ähnlich SPAN#weekday

Gruß oldster

Wenn Du nicht weiter kommst.......melde dich Wink

poecki · 01.10.2011, 14:09

MELDE

ich stehe i-wie gerade auf dem schlauch

Mokabaer · 01.10.2011, 14:53

Kann das sein das man dieses Problem über die .ccs Datei lösen sollte. Dort sollte doch die Position der Elemente angeben sein - einfach die Werte ändern und fertig ...

Sent from my iPhone 3GS

oldster · 01.10.2011, 15:15

Code:
<html><head>

    <script type="text/javascript">

function init ( )

 {

   timeDisplay = document.createTextNode ( "" );

   document.getElementById("clock").appendChild ( timeDisplay );

 }

function updateClock ( )

 {

   var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );

   var currentMinutes = currentTime.getMinutes ( );

   var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required

   currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

   currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate

   var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed

   currentHours = ( currentHours > 24 ) ? currentHours - 24 : currentHours;

  // Convert an hours component of "0" to "12"

   currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display

   var currentTimeString = currentHours + ":" + currentMinutes;

  // Update the time display

   document.getElementById("clock").firstChild.nodeValue = currentTimeString;

 }

function init2 ( )

 {

   timeDisplay = document.createTextNode ( "" );

   document.getElementById("ampm").appendChild ( timeDisplay );

 }

function init3 ( )

 {

   timeDisplay = document.createTextNode ( "" );

   document.getElementById("calendar").appendChild ( timeDisplay );

 }

function calendarDate ( )

{

var this_weekday_name_array = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag")

 var this_month_name_array = new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember")//predefine month names

 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;

var month = this_date_timestamp.getMonth();

document.getElementById("weekday").firstChild.nodeValue = this_weekday_name_array[this_weekday]; //concat long date string

 document.getElementById("month").firstChild.nodeValue = this_month_name_array[this_month]; //concat long date string

  document.getElementById("date").firstChild.nodeValue = this_date + '.';//concat long date string

 }

</script>

    <style>

        body {

             background-image:url(../weather_preview1.png);

             background-repeat:no-repeat;

             padding: 0px 0 0 0;

             height: 480px;

             width: 320px;

        }

 SPAN#clock 

{

     font-family: Helvetica;

     font-weight: 300; 

    text-align: center;

     color: white;

      text-shadow: 0px 0px 3px black; 

    font-size: 20px;

     text-transform: Capitalize;   

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

 }

    SPAN#weekday 

{

        font-family: Helvetica;

      text-transform: Capitalize; 

       text-align: center;

      font-size: 14px;

      font-weight: 200; 

       color: white;

      text-shadow: 0px 0px 2px black; 

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

}

     SPAN#month 

{

        font-family: Helvetica;

      text-transform: Capitalize; 

       text-align: center;

      font-size: 14px;

      font-weight: 200; 

       color: white;

      text-shadow: 0px 0px 2px black; 

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

 }

    SPAN#date 

{

        font-family: Helvetica;

      text-transform: Capitalize; 

       text-align: center;

      font-size: 14px;

      font-weight: 200; 

       color: white;

      text-shadow: 0px 0px 2px black; 

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

 }

    </style>

</head>

 <body bgcolor="000000">

<table>

 <tr>

     <td>

<table style="position: absolute;top: 116px; left: -14px; width: 321px; height: 481px;">

 <tr align="right" valign="top"  border="0" cellpadding="0">

     <td height="12" valign="top" margin-left="20" >

 <span id="clock">

 <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script>

 </span>

 <td></td>

 </tr>

 </table>

<table style="position: absolute;top: 160px; left: 24px; width: 321px; height: 481px;">

 <tr align="left" valign="top"  border="0" cellpadding="0">

     <td height="12" valign="top" margin-left="20" >

 <span id="weekday">

 <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

 </span>

 <td></td>

 </tr>

 </table>

 <table style="position: absolute;top: 160px; left: 112px; width: 321px; height: 481px;">

 <tr align="center" valign="top"  border="0" cellpadding="0">

     <td height="12" valign="top" margin-left="20" >

 <span id="month">

 <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

 </span>

 <td></td>

 </tr>

 </table>

 <table style="position: absolute;top: 140px; left: 112px; width: 321px; height: 481px;">

 <tr align="center" valign="top"  border="0" cellpadding="0">

     <td height="12" valign="top" margin-left="20" >

 <span id="date">

 <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

 </span>

 <td></td>

 </tr>

 </table>

<img src="Layer.png" height="480" width="320" style="position: absolute; top: 0px; left: 0px; z-index:-10;">

 <img src="Overlay.png" height="480" width="320" style="position: absolute; top: 0px; left: 0px; z-index:-10;">

<span id="calendar" align=right>

     <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

     </span>

     <span id="clock">

     <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span> <span id="ampm">

     </span>

     <object data="Private/WeatherWidget/WeatherWidget.html"  type="text/html" height="480" width="320" style="left:0px">

        <p>Place WeatherWidget in Subthemes</p>

     </object>

</body></html>

Die Änderungen sind unter der ID date und month zu finden. Lol

Gruß oldster

Ach ja, wenn Du nicht weiter kommst....melde dich Rofl

poecki · 01.10.2011, 15:48

bombe

1000 Dank

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken