17.04.2011, 23:19
Ich habe dieses Javascript etwas überarbeitet. Geändert worden ist:
Monatsnamen sind nun in deutsch und ich habe auch noch die Wochentage (auch in deutsch) in das Javascript eingebaut. Außerdem habe ich die Datumdarstellung auf das deutsche System , z.B. 17. Februar anstatt das englische System 17th Februar.
Der Anhang wurde dementsprechen neu gestaltet und ersetzt.
Dieses ist ein Javascript mit dem man die Zeit und das Datum auf dem Lockscreen bekommt. Es ist ein Teil des Codes von der LockBackground.html Seite. Eine komplette LockBackground.html Seite hänge ich an, die Ihr gerne als Template benutzen könnt.
Das Javascript besteht aus mehreren Teilen, einige sind im <head> ....</head> Bereich, einige sind zwischen HEAD und BODY und einige sind in dem <body> ...</body> Bereich.
Ich habe Kommentare an den Stellen eingefügt, die man ändern kann und auch sollte.
Da es sich hier um einen "Custom" Zeit und Datum Einbau handelt würde natürlich auch noch die Zeit und Datum des iOS erscheinen. Von daher braucht man von Cydia folgende App "Lockscreen Clock Hide" findet man in Sections->Tweaks. Allerdings würde ich auch noch die "Lockscreen Dim Delay" empfehlen, mit der kann man die Ausschaltzeit des Lockscreens ändern.
<script type="text/javascript">
function showTime()
{
date=new Date();
dateday=date.getDate();
hour=date.getHours();
minute=date.getMinutes();
second=date.getSeconds();
if (date.getDate()<10) dateday="0"+dateday;
if (hour<10) hour="0"+hour;
if (minute<10) minute="0"+minute;
if (second<10) second="0"+second;
document.getElementById("textTime").innerHTML=""+hour+":"+minute+":"+second;
setTimeout("showTime()", 1000);
}
</script>
<script type="text/javascript">
function showDay()
{
d=new Date()
weekday=new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag",
"Freitag","Samstag")
document.getElementById("textDay").innerHTML=(weekday[d.getDay()])
}
</script>
<script type="text/javascript">
function showDate()
{
m_names = new Array"Januar", "Februar", "März", "April", "Mai", "Juni", "July", "August", "September", "Oktober", "November", "Dezember");
currentDate = new Date()
day = currentDate.getDate()
month = currentDate.getMonth()
year = currentDate.getFullYear()
document.getElementById("textDate").innerHTML=(day +". " + m_names[month] + " " + year)
}
</script>
</head> #Der HEAD Bereich endet hier!
<style>
SPAN#textTime # Font und Fontfarbeneinstellung für die Zeit
{
font-family: TimesNewRomanPS-BoldItalicMT; #Wählt eine Font-family die auch auf dem iPhone ist!
text-align: center;
font-size: 50px; # Ändert die Fontgröße
text-shadow: 0px 8px 10px #4F52B9; # Textschatten: 0px>x-position (negativer Wert=links, positiver Wert=rechts) 8px>y-position (negativer Wert=oben, positiver Wert=unten) 10px>ist die Density des Schattens (0= voller Schatten, höhere Werte machen den Schatten mehr wolkenartig
-webkit-text-fill-color: transparent; # font fill Farbe, hier transparent=kein font fill, also nur Font outline, sonst eine Farbe einsetzen, z.B #00FFFF.
-webkit-text-stroke:2px #00FFFF; # Font outline Dicke und Farbe
}
</style>
<style>
SPAN#textDay
{
font-family: TrebuchetMS-Bold;#Wählt eine Font-family die auch auf dem iPhone ist!
text-align: center
font-size:30px; # Ändert die Fontgröße
text-shadow: 0px 8px 10px #FDCF53;; # Textschatten: 0px>x-position (negativer Wert=links, positiver Wert=rechts) 8px>y-position (negativer Wert=oben, positiver Wert=unten) 10px>ist die Density des Schattens (0= voller Schatten, höhere Werte machen den Schatten mehr wolkenartig
-webkit-text-fill-color: transparent; # font fill Farbe, hier transparent=kein font fill, also nur Font outline, sonst eine Farbe einsetzen, z.B #00FFFF.
-webkit-text-stroke:1px #00FFFF; # Font outline Dicke und Farbe
}
</style>
<style>
SPAN#textDate # Font und Fontfarbeneinstellung für das Datum
{
font-family: TrebuchetMS-Bold; #Wählt eine Font-family die auch auf dem iPhone ist!
text-align: center;
font-size:30px; # Ändert die Fontgröße
text-shadow: 0px -3px 8px #4F52B9; # Textschatten: 0px>x-position (negativer Wert=links, positiver Wert=rechts) 8px>y-position (negativer Wert=oben, positiver Wert=unten) 10px>ist die Density des Schattens (0= voller Schatten, höhere Werte machen den Schatten mehr wolkenartig
-webkit-text-fill-color: transparent; # font fill Farbe, hier transparent=kein font fill, also nur Font outline, sonst eine Farbe einsetzen, z.B #00FFFF
-webkit-text-stroke:2px #00FFFF; # Font outline Dicke und Farbe
}
</style>
<body onLoad="showTime(); showDay(); showDate();">#Der BODY Bereich beginnt hier.
<table style="position: absolute; top: 50px; left: 0px; width: 320px; height: 480px;" cellspacing="0" cellpadding="0" align="center">
<tr align="center" valign="top" border="0" cellpadding="0">
<td height="450" valign="top"> # Die Benutzung einesTable macht es einfacher die Zeit und das Datum zu plazieren, top:50px bedeutet das die Zeit 50 pixel von dem Top playiert wird, mindestens 30px hier eingeben sonst sitzt die Zeit auf den Status Bar Ikons!
<span id="textTime"></span><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> # Jedes <br> fügt eine neue Zeile ein, somit kann man die Zeit oben haben und das Datum ganz unten
<br>
<br>
<br>
<br>
<span id="textDay"></span>
<br>
<span id="textDate"></span>
</td>
</tr>
</table
Es ist recht einfach dieses zu ändern. Ich benutze Dreamweaver 8, aber auch NotePad reicht aus.
Safari Webbrowser ist ein absolutes muß, wegen dem webkit Anteil in dem Code und es hilft die LockBackground.html zu testen nach jeder Veränderung.
So sieht die angehängte LockBackground.html aus
![[Bild: F4M.jpg]](http://i895.photobucket.com/albums/ac156/rasputin007/F4M/F4M.jpg)
oder als animiertes LockBackground.html (Safari browser nötig!!!)
Ich habe bewußt auf den Slider und den Text verzichtet weil mittlerweile weis ich wohl wie man den Lockscreen unlocked!
Übrigens kann man dieses Javascript auch in eine html Seite einbauen und dann diese auf dem Desktop PC als Wallpaper benutzen.
Und HIER ist mein Windows Desktop Wallpaper, Safari für optimale Darstellung (Windows hat nur schwarzen Font)
Viel Spaß beim rumprobieren.
Monatsnamen sind nun in deutsch und ich habe auch noch die Wochentage (auch in deutsch) in das Javascript eingebaut. Außerdem habe ich die Datumdarstellung auf das deutsche System , z.B. 17. Februar anstatt das englische System 17th Februar.
Der Anhang wurde dementsprechen neu gestaltet und ersetzt.
Dieses ist ein Javascript mit dem man die Zeit und das Datum auf dem Lockscreen bekommt. Es ist ein Teil des Codes von der LockBackground.html Seite. Eine komplette LockBackground.html Seite hänge ich an, die Ihr gerne als Template benutzen könnt.
Das Javascript besteht aus mehreren Teilen, einige sind im <head> ....</head> Bereich, einige sind zwischen HEAD und BODY und einige sind in dem <body> ...</body> Bereich.
Ich habe Kommentare an den Stellen eingefügt, die man ändern kann und auch sollte.
Da es sich hier um einen "Custom" Zeit und Datum Einbau handelt würde natürlich auch noch die Zeit und Datum des iOS erscheinen. Von daher braucht man von Cydia folgende App "Lockscreen Clock Hide" findet man in Sections->Tweaks. Allerdings würde ich auch noch die "Lockscreen Dim Delay" empfehlen, mit der kann man die Ausschaltzeit des Lockscreens ändern.
<script type="text/javascript">
function showTime()
{
date=new Date();
dateday=date.getDate();
hour=date.getHours();
minute=date.getMinutes();
second=date.getSeconds();
if (date.getDate()<10) dateday="0"+dateday;
if (hour<10) hour="0"+hour;
if (minute<10) minute="0"+minute;
if (second<10) second="0"+second;
document.getElementById("textTime").innerHTML=""+hour+":"+minute+":"+second;
setTimeout("showTime()", 1000);
}
</script>
<script type="text/javascript">
function showDay()
{
d=new Date()
weekday=new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag",
"Freitag","Samstag")
document.getElementById("textDay").innerHTML=(weekday[d.getDay()])
}
</script>
<script type="text/javascript">
function showDate()
{
m_names = new Array"Januar", "Februar", "März", "April", "Mai", "Juni", "July", "August", "September", "Oktober", "November", "Dezember");
currentDate = new Date()
day = currentDate.getDate()
month = currentDate.getMonth()
year = currentDate.getFullYear()
document.getElementById("textDate").innerHTML=(day +". " + m_names[month] + " " + year)
}
</script>
</head> #Der HEAD Bereich endet hier!
<style>
SPAN#textTime # Font und Fontfarbeneinstellung für die Zeit
{
font-family: TimesNewRomanPS-BoldItalicMT; #Wählt eine Font-family die auch auf dem iPhone ist!
text-align: center;
font-size: 50px; # Ändert die Fontgröße
text-shadow: 0px 8px 10px #4F52B9; # Textschatten: 0px>x-position (negativer Wert=links, positiver Wert=rechts) 8px>y-position (negativer Wert=oben, positiver Wert=unten) 10px>ist die Density des Schattens (0= voller Schatten, höhere Werte machen den Schatten mehr wolkenartig
-webkit-text-fill-color: transparent; # font fill Farbe, hier transparent=kein font fill, also nur Font outline, sonst eine Farbe einsetzen, z.B #00FFFF.
-webkit-text-stroke:2px #00FFFF; # Font outline Dicke und Farbe
}
</style>
<style>
SPAN#textDay
{
font-family: TrebuchetMS-Bold;#Wählt eine Font-family die auch auf dem iPhone ist!
text-align: center
font-size:30px; # Ändert die Fontgröße
text-shadow: 0px 8px 10px #FDCF53;; # Textschatten: 0px>x-position (negativer Wert=links, positiver Wert=rechts) 8px>y-position (negativer Wert=oben, positiver Wert=unten) 10px>ist die Density des Schattens (0= voller Schatten, höhere Werte machen den Schatten mehr wolkenartig
-webkit-text-fill-color: transparent; # font fill Farbe, hier transparent=kein font fill, also nur Font outline, sonst eine Farbe einsetzen, z.B #00FFFF.
-webkit-text-stroke:1px #00FFFF; # Font outline Dicke und Farbe
}
</style>
<style>
SPAN#textDate # Font und Fontfarbeneinstellung für das Datum
{
font-family: TrebuchetMS-Bold; #Wählt eine Font-family die auch auf dem iPhone ist!
text-align: center;
font-size:30px; # Ändert die Fontgröße
text-shadow: 0px -3px 8px #4F52B9; # Textschatten: 0px>x-position (negativer Wert=links, positiver Wert=rechts) 8px>y-position (negativer Wert=oben, positiver Wert=unten) 10px>ist die Density des Schattens (0= voller Schatten, höhere Werte machen den Schatten mehr wolkenartig
-webkit-text-fill-color: transparent; # font fill Farbe, hier transparent=kein font fill, also nur Font outline, sonst eine Farbe einsetzen, z.B #00FFFF
-webkit-text-stroke:2px #00FFFF; # Font outline Dicke und Farbe
}
</style>
<body onLoad="showTime(); showDay(); showDate();">#Der BODY Bereich beginnt hier.
<table style="position: absolute; top: 50px; left: 0px; width: 320px; height: 480px;" cellspacing="0" cellpadding="0" align="center">
<tr align="center" valign="top" border="0" cellpadding="0">
<td height="450" valign="top"> # Die Benutzung einesTable macht es einfacher die Zeit und das Datum zu plazieren, top:50px bedeutet das die Zeit 50 pixel von dem Top playiert wird, mindestens 30px hier eingeben sonst sitzt die Zeit auf den Status Bar Ikons!
<span id="textTime"></span><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> # Jedes <br> fügt eine neue Zeile ein, somit kann man die Zeit oben haben und das Datum ganz unten
<br>
<br>
<br>
<br>
<span id="textDay"></span>
<br>
<span id="textDate"></span>
</td>
</tr>
</table
Es ist recht einfach dieses zu ändern. Ich benutze Dreamweaver 8, aber auch NotePad reicht aus.
Safari Webbrowser ist ein absolutes muß, wegen dem webkit Anteil in dem Code und es hilft die LockBackground.html zu testen nach jeder Veränderung.
So sieht die angehängte LockBackground.html aus
oder als animiertes LockBackground.html (Safari browser nötig!!!)
Ich habe bewußt auf den Slider und den Text verzichtet weil mittlerweile weis ich wohl wie man den Lockscreen unlocked!
Übrigens kann man dieses Javascript auch in eine html Seite einbauen und dann diese auf dem Desktop PC als Wallpaper benutzen.
Und HIER ist mein Windows Desktop Wallpaper, Safari für optimale Darstellung (Windows hat nur schwarzen Font)
Viel Spaß beim rumprobieren.
![[Bild: example.jpg]](http://i895.photobucket.com/albums/ac156/rasputin007/MMUS/example.jpg)