Das etwas andere Uhren-Skript

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Das etwas andere Uhren-Skript

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Das etwas andere Uhren-Skript datum

20.07.2014 16:19

Jürgen

Informationen anzeigen

Beitr�ge:	18
Registriert seit:	11.07.2014

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Krebs
Likes	8

Ich weiß, schon gerade im Java gibt es genug Uhren-Skripte.

Und jeder ist gesättigt davon - aber ehrlich, diese habt ihr auch schon gesehen?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<script language="javascript">
 
var cellwidth=10; // Zellenhoehe
var cellheight=10; // Zellenbreite
var fontsize=11; // Schriftgroesse der Zahlen
var fontcolor="tan"; // Schriftfarbe
var fontstyle="bold"; // Schriftgrad
var oncolor="red"; // Farbe der aktiven Zellen
var offcolor="lightgrey"; // Farbe der inaktiven Zellen 
 
//************** DO NOT EDIT BEOND THIS POINT *************//
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var binclk, now;
var t='<table cellspacing="1" cellpadding="0" border="0"><tr><td align="center"> </td>';
for(i=0;i<=58;i+=2)t+='<td align="left" colspan="2"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">'+i+'<br> |</font></td>';
t+='<td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">H: </font></td>';
for(i=0;i<=23;i++){
t+='<td>';
t+=(NS4)? '<ilayer name="hrs'+i+'" height="'+cellheight+'" width="'+cellwidth+'" bgcolor="'+offcolor+'"></ilayer>' : '<div id="hrs'+i+'" style="position:relative; width:'+cellwidth+'px; font-size:1px; height:'+cellheight+'px; background-color:'+offcolor+'"></div>';
t+='</td>';
}
t+='<td colspan="36"><td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">M: </font></td>';
for(i=0;i<=59;i++){
t+='<td>';
t+=(NS4)? '<ilayer name="min'+i+'" width="'+cellwidth+'" height="'+cellheight+'" bgcolor="'+offcolor+'"></ilayer>' : '<div id="min'+i+'" style="position:relative; width:'+cellwidth+'px; font-size:1px; height:'+cellheight+'px; background-color:'+offcolor+'"></div>';
t+='</td>';
}
t+='<td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">S: </font></td>';
for(i=0;i<=59;i++)
{
t+='<td>';
t+=(NS4)? '<ilayer name="sec'+i+'" width="'+cellwidth+'" height="'+cellheight+'" bgcolor="'+offcolor+'"></ilayer>' : '<div id="sec'+i+'" style="position:relative; width:'+cellwidth+'px; font-size:1px; height:'+cellheight+'px; background-color:'+offcolor+'"></div>';
t+='</td>';
}
t+='<td> </td></tr><tr><td> </td><td> </td>';
for(i=1;i<=59;i+=2)t+='<td align="left" colspan="2"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'"> |<br>'+i+'</font></td>';
t+='</tr></table>';
document.write(t);
function init(){
getvals();
for(i=0;i<=now.h;i++)setbgcolor('hrs'+i, oncolor);
for(i=0;i<=now.m;i++)setbgcolor('min'+i, oncolor);
for(i=0;i<=now.s;i++)setbgcolor('sec'+i, oncolor);
setInterval('setclock()', 100);
}
function getvals(){
now=new Date();
now.s=now.getSeconds();
now.h=now.getHours();
now.m=now.getMinutes();
}
function setclock(){
getvals();
if((now.h==0)&&(now.m==0)) for(i=1;i<=23;i++)setbgcolor('hrs'+i, offcolor);
if((now.s==0)&&(now.m==0)) for (i=1;i<=59;i++)setbgcolor('min'+i, offcolor);
if(now.s==0) for(i=1;i<=59;i++)setbgcolor('sec'+i, offcolor);
setbgcolor('hrs'+now.h, oncolor);
setbgcolor('min'+now.m, oncolor);
setbgcolor('sec'+now.s, oncolor);
}
function resize(){
if(NS4)history.go(0);
}
function setbgcolor(idstr, color){
if(IE4)document.all[idstr].style.backgroundColor=color;
if(NS4)document.layers[idstr].bgColor=color;
if(NS6)document.getElementById(idstr).style.backgroundColor=color;
}
window.onload=init;
window.onresize=resize;
</script>
 

Schlie�en

LG Jürgen

Wolfgang findet das Top!

Antworten

#2 | RE: Das etwas andere, modifizierte Uhren-Skript! datum

25.07.2019 21:25 (zuletzt bearbeitet: 12.01.2025 22:53)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Das etwas andere, modifizierte Uhren-Skript!
Aktualisiert 10.01.2025

Ich habe mir das Uhren-Skript nochmal angesehen und geschaut, welche Möglichkeiten der Anpassung und Veränderung möglich sind!
Nach wie vor bleibt es eine ausgefallene, besondere Uhr!

Anpassungen und Veränderungen im folgenden, neuen Skript:

Die Zahlenreihen und Markierungen wurden zentriert und stehen jetzt genau in den entsprechenden Zeit-Blöcken!
Die untere Zahlenreihe wurde weggelassen!
Zeitformate sind ausgeschrieben!
Die Uhr hat einen festen Hintergrund und mehr Rundungen bekommen.
Die Uhr kann beliebig an jedes Forum angepasst und verändert werden!

Das Skript kann in die "Kopf- oder Fußzeile" kopiert werden!
Über Zeile 1 wird die Uhr zentriert (<center>�</center>) und auf Abstand (<padding>) gehalten!
In Zeile 7 wird die Schrift angepasst!
In Zeile 8 kann komplett der Hintergrund und die Breite (hier 900px) der Uhr bestimmt werden!
In Zeile 4+5 können die Farben der Uhrenblöcke verändert werden!
In Zeile 6 haben die Uhrenblöcke über "border-radius" ihre Rundungen und ihr Aussehen bekommen!
Wird die Größe der Uhrenblöcke (Zeile 6) oder die Breite der Uhr (Zeile 8) verändert, muss evtl. "margin-left" in Zeile 11 für die Position der Striche, angepasst werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<center><div id="newclock" style="padding:10px;"></div></center>
 
<script language="javascript">
var oncolor="#00006f"; // Farbe der aktiven Zellen
var offcolor="lightgrey"; // Farbe der inaktiven Zellen
var cellclock="width:9px; height:9px; border-radius:10px; border:1px solid #000000; position:relative;"; // Block
var fontclock="font-size:14px; font-weight:bold; color: #000000;"; // Schrift
var backgroundclock="background-image: url(https://files.homepagemodules.de/b104774/a_177_089c685d.jpg);width:950px;padding:10px;border-radius:9px;border:1px solid #333333;box-shadow: 0px 0px 4px 3px #eeeeee;"; // Hintergrund
 
var newclock='<div style="'+backgroundclock+'"><table cellspacing="3" cellpadding="0" border="0"><tr><td></td>';
for(i=0;i<=58;i+=2)newclock+='<td colspan="2" style="'+fontclock+'"><div style="text-align:center;margin-left:-18px;">'+i+'<br>|</div></td>';
newclock+='</tr><tr><td style="'+fontclock+';">Stunden: </td>';
for(i=0;i<=23;i++){newclock+='<td><div id="hrs'+i+'" style="'+cellclock+';background-color:'+offcolor+';"></div></td>';}
newclock+='</tr><tr><td style="'+fontclock+';">Minuten: </td>';
for(i=0;i<=59;i++){newclock+='<td><div id="min'+i+'" style="'+cellclock+';background-color:'+offcolor+';"></div></td>';}
newclock+='</tr><tr><td style="'+fontclock+';">Sekunden: </td>';
for(i=0;i<=59;i++){newclock+='<td><div id="sec'+i+'" style="'+cellclock+';background-color:'+offcolor+';"></div></td>';}
newclock+='</tr></table></div>';
 
document.getElementById('newclock').innerHTML=newclock;
 
function init(){
getvals();
for(i=0;i<=now.h;i++)setbgcolor('hrs'+i, oncolor);
for(i=0;i<=now.m;i++)setbgcolor('min'+i, oncolor);
for(i=0;i<=now.s;i++)setbgcolor('sec'+i, oncolor);
setInterval('setclock()', 100);
}
function getvals(){
now=new Date();
now.s=now.getSeconds();
now.h=now.getHours();
now.m=now.getMinutes();
}
function setclock(){
getvals();
if((now.h==0)&&(now.m==0)) for(i=1;i<=23;i++)setbgcolor('hrs'+i, offcolor);
if((now.s==0)&&(now.m==0)) for (i=1;i<=59;i++)setbgcolor('min'+i, offcolor);
if(now.s==0) for(i=1;i<=59;i++)setbgcolor('sec'+i, offcolor);
setbgcolor('hrs'+now.h, oncolor);
setbgcolor('min'+now.m, oncolor);
setbgcolor('sec'+now.s, oncolor);
}
function setbgcolor(idstr, color){
document.getElementById(idstr).style.backgroundColor=color;
}
init();
</script>
 
 

Schließen

Interessante Links:

  • Weltzeituhr - Verschiedene Zeiten anzeigen!
  • Jahrhundertuhr
  • Countdown(up)-Zähler!
  • Hintergrundbilder wechseln automatisch nach Zeit!
  • Hintergrundbilder automatisch nach Tageszeit einstellen!

Bis dann und weiterhin viel Spaß

Wolfgang

Antworten

Moderations-Kommentar:

Skript aktualisiert!

#3 | Das etwas andere, modifizierte Uhren-Skript ohne Sekundenanzeige! datum

26.07.2019 19:27 (zuletzt bearbeitet: 10.01.2025 21:22)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Das etwas andere, modifizierte Uhren-Skript ohne Sekundenanzeige!
Aktualisiert 10.01.2025

Je nach Art der Webseite kann es wichtig sein, die Oberfläche ruhiger zu gestalten. Eine sich ständig bewegende Sekunde der Uhr kann hier störend wirken!
Das folgende Skript hat alle Vorteile und Einstellmöglichkeiten von Beitrag #2, kommt ohne Sekunde aus und ist somit auch kleiner!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<center><div id="newclock" style="padding:10px;"></div></center>
 
<script language="javascript">
var oncolor="#00006f"; // Farbe der aktiven Zellen
var offcolor="lightgrey"; // Farbe der inaktiven Zellen
var cellclock="width:9px; height:9px; border-radius:10px; border:1px solid #000000; position:relative;"; // Block
var fontclock="font-size:14px; font-weight:bold; color: #000000;text-align:left;"; // Schrift
var backgroundclock="background-image: url(https://files.homepagemodules.de/b104774/a_177_089c685d.jpg);width:950px;padding:10px;border-radius:9px;border:1px solid #333333;box-shadow: 0px 0px 4px 3px #eeeeee;"; // Hintergrund
 
var newclock='<div style="'+backgroundclock+'"><table cellspacing="3" cellpadding="0" border="0"><tr><td></td>';
for(i=0;i<=58;i+=2)newclock+='<td colspan="2" style="'+fontclock+'"><div style="text-align:center;margin-left:-18px;">'+i+'<br>|</div></td>';
newclock+='</tr><tr><td style="'+fontclock+';">Stunden: </td>';
for(i=0;i<=23;i++){newclock+='<td><div id="hrs'+i+'" style="'+cellclock+';background-color:'+offcolor+';"></div></td>';}
newclock+='</tr><tr><td style="'+fontclock+';">Minuten: </td>';
for(i=0;i<=59;i++){newclock+='<td><div id="min'+i+'" style="'+cellclock+';background-color:'+offcolor+';"></div></td>';}
newclock+='</tr></table></div>';
 
document.getElementById('newclock').innerHTML=newclock;
 
function init(){
getvals();
for(i=0;i<=now.h;i++)setbgcolor('hrs'+i, oncolor);
for(i=0;i<=now.m;i++)setbgcolor('min'+i, oncolor);
setInterval('setclock()', 100);
}
function getvals(){
now=new Date();
now.h=now.getHours();
now.m=now.getMinutes();
}
function setclock(){
getvals();
if((now.h==0)&&(now.m==0)) for(i=1;i<=23;i++)setbgcolor('hrs'+i, offcolor);
if((now.s==0)&&(now.m==0)) for (i=1;i<=59;i++)setbgcolor('min'+i, offcolor);
setbgcolor('hrs'+now.h, oncolor);
setbgcolor('min'+now.m, oncolor);
}
function setbgcolor(idstr, color){
document.getElementById(idstr).style.backgroundColor=color;
}
init();
</script>
 

Schließen

Interessante Links:

  • Weltzeituhr - Verschiedene Zeiten anzeigen!
  • Countdown(up)-Zähler!
  • Hintergrundbilder wechseln automatisch nach Zeit!
  • Hintergrundbilder automatisch nach Tageszeit einstellen!

Bis dann und weiterhin viel Spaß

Wolfgang

Antworten

Moderations-Kommentar:

Skript aktualisiert!

@ Taggen - Super Funktion, um Mitglieder direkt zu informieren! � � Geheime Sachen - Verschiedene Benutzergruppen, Quelltext unlesbar machen!

�hnliche Themen

Antworten

Letzter Beitrag

Ideen, Inspirationen, Skripte sind hier im Forum frei verfügbar!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 1 08.11.2024 17:14
Kipper-Spedition • Zugriffe: 117
Beschriftung der Bewertungen anders platzieren
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen 8 05.10.2024 22:14
Anne • Zugriffe: 526
Geschenk-Skripte sagen mehr als Worte :O)
Erstellt im Forum Lob, Kritik & Verbesserungsvorschl�ge von Daishi 1 18.08.2023 10:00
Wolfgang • Zugriffe: 424

Vorschau wird anders angezeigt als gespeicherter Beitrag
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen

08.08.2023 13:42
von

bienchen • Zugriffe: 297

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 1956

Feuerwerk zum Geburtstag oder andere Anlässe - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.08.2023 20:30
von

Kipper-Spedition • Zugriffe: 1580

Uhr mit Datum und super Animationen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 5 10.01.2025 12:44
Wolfgang • Zugriffe: 647

Durchschnittliche Beiträge ins User-Profil einbauen - Teil 1 + 2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.12.2019 07:18
von

Wolfgang • Zugriffe: 2228

Scrollbalken und andere Formatierungen für die neue Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

16.04.2013 22:54
von

Wolfgang • Zugriffe: 1387

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

58%

Das etwas andere, modifizierte Uhren-Skript!Aktualisiert 10.01.2025

Das etwas andere, modifizierte Uhren-Skript ohne Sekundenanzeige!Aktualisiert 10.01.2025

Das etwas andere, modifizierte Uhren-Skript!
Aktualisiert 10.01.2025

Das etwas andere, modifizierte Uhren-Skript ohne Sekundenanzeige!
Aktualisiert 10.01.2025