Forum - Uhr mit Datum und super Animationen!

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! » Uhr mit Datum und super Animationen!

Seite 1 von 2 « Seite 1 2 Seite »

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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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 | Uhr mit Datum und super Animationen! datum

21.07.2022 17:13 (zuletzt bearbeitet: 10.01.2025 12:44)

Daishi

Informationen anzeigen

Beiträge:	475
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	458

Habe mal eine Uhr mit Datum gebastelt, sieht gut aus so weit, nur bekomme ich sie im Xobor-Forum nicht zum Laufen.

Trotz Bemühungen und ändern der CSS -Tags ohne Erfolg, das sieht so schrecklich aus

Ich weiß auch nicht, ob ich im JavaScript Fehler dort drinnen habe. In Codepen sieht alles gut aus, da geht alles so weit, nur leider nicht hier im Xobor-Forum. Das Javascript ist mit im HTML eingefügt.

Habe auch versucht Erklärungen einzufügen, so gut ich kann, darin bin ich noch nicht so gut. Z.B. (  ) und ( /* Titel*/ ) usw. muss auch noch die Begriffe lernen, wie das alles heißt.

Hier der HTML Code

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<div class="app-body">
  <!-- Titel -->
  <h1 class="title">Uhr mit Datum</h1>
  <!-- Uhr -->
  <div id="clock"></div>
  <!-- Datum -->
  <div id="date"></div>
</div>
 
<!-- Javascript -->
<script id="rendered-js">
let date = new Date();
let prevMin = date.getMinutes();
let prevHour = date.getHours();
 
updateTime();
setInterval(() => {
  updateTime();
}, 1000);
 
function updateTime() {
  const clock = document.getElementById("clock");
  date = new Date();
 
  let hour = formatNum(date.getHours());
  let min = formatNum(date.getMinutes());
  let sec = formatNum(date.getSeconds());
 
  clock.innerHTML = `<span id="hour" class="square">${hour}</span>
  <span id="min" class="square">${min}</span>
  <span id="sec" class="square anim">${sec}</span>`;
 
  let dayOfWeek = formatDOF(date.getDay());
  let day = date.getDate();
  let month = formatMonth(date.getMonth());
  let year = date.getFullYear();
 
  let dateDiv = document.getElementById("date");
  dateDiv.innerHTML = `<span class="dof">${dayOfWeek}</span>
  <span class="fulldate">${day}, ${month} ${year}</span>`;
 
  handleChanges(hour, min);
}
 
function formatNum(num) {
  if (num < 10) num = `0${num}`;
  return num;
}
 
function formatDOF(dayOfWeek) {
  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  return days[dayOfWeek];
}
 
function formatMonth(month) {
  const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"];
 
  return months[month];
}
 
function handleChanges(h, m) {
  const timeoutTime = 500;
  const hourSpan = document.getElementById("hour");
  const minSpan = document.getElementById("min");
  if (h != prevHour) {
    prevHour = h;
    hourSpan.classList.toggle("anim");
    setTimeout(() => {
      hourSpan.classList.toggle("anim");
    }, timeoutTime);
  }
 
  if (m != prevMin) {
    prevMin = m;
    minSpan.classList.toggle("anim");
    setTimeout(() => {
      minSpan.classList.toggle("anim");
    }, timeoutTime);
  }
}
//# sourceURL=pen.js
    </script>
 

Schließen

Hier der CSS Code

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
 
@import url("https://fonts.googleapis.com/css2?family=Redressed&display=swap");
* {
  font-size: 30px;
  font-family: "Redressed", cursive;
  color: #eee;
  box-sizing: border-box;
}
body {
  background-color: #000;
}
/* Titel*/
.title {
  text-align: center;
}
.app-body {
  border: 1px groove #eee;
  border-radius: 10px;
  padding: 1rem;
  width: 450px;
  margin: 25vh auto;
}
/* UHR */
#clock {
  display: flex;
  justify-content: center;
}
/* Datum */
#date {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.square {
  border-radius: 10px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin: 1rem 0;
  width: 100px;
  padding: 1rem 0;
  text-align: center;
  transition: 100ms all;
}
.dof {
  border-radius: 50%;
  background-color: #444;
  padding: 0.4rem;
}
.fulldate {
  border-bottom: 3px double #888;
}
/* Animation */
.anim {
  animation: 500ms update ease 1;
}
 
@keyframes update {
  50% {
    background-color: #444;
    transform: scale(1.1);
  }
}
 
 

Schließen

Ich hoffe, die Idee kommt gut an. Habe die Idee so weit umgesetzt.
Hier noch ein Bild wie es im Xobor-Forum aussieht schlimm.

Ich weiß nur nicht, wo ich einen Fehler gemacht habe. Ist nur ärgerlich, dass ich das nicht so sauber ohne Hilfe hinbekomme fürs Xobor-Forum.

Mit freundlichen Grüßen
Daishi

Daishi

Wolfgang und Kipper-Spedition finden das Top!

Antworten

#2 | Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

22.07.2022 17:15 (zuletzt bearbeitet: 11.07.2023 14:58)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3980
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1768

Uhr mit Datum & Herzschlag - Formatiert fürs Forum

Hallo Daishi,
Du bist ja unermüdlich mit Deinen Ideen und Vorschläge!
Vor allen Dingen haben sie immer etwas besonderes!

Normalerweise lasse ich bei Uhren die Sekunden gerne weg, weil ein ständiger Wechsel zu viel Unruhe mit sich bringt. Ähnlich kann es bei Laufschriften sein!
Aber Dein Uhrenvorschlag ist genial!
Hier pulsiert die Sekunde wie ein Herzschlag!
Für mich fast beruhigend!

@Daishi - Zu Deinem Skript:

Der Fehler der sich eingeschlichen hat liegt wohl am fehlenden Wert für die Breite der Uhr!
Entweder ist hier für ein Semikolon ein Komma reingerutscht und die Breite wird nicht umgesetzt oder der Wert für die Breite steht auf "auto"!
Es kann auch sein, dass schon vorhandene Classes das Skript beeinflussen!
Bei mir wird die Uhr nicht so auseinandergezogen!

Um die Uhr im Forum gut darzustellen, muss man schauen was die Classes und ID's so beinflussen!

Sternchen (*) und body in der CSS wirken sich nach wie vor aufs ganze Forum aus!
Da nur die Uhr zu Geltung gebracht werden soll, muss man schauen, welche Div-Container mit Farbe und Schrift versorgt werden müssen!
Ansonsten läuft die Uhr recht gut!

Was ich geändert habe:

Das Skript ist auch genial, weil man viel verändern kann!
Habe die Datumsangabe auf Deutsch umgestellt!
Habe gleich alle CSS-Tags namentlich erweitert, damit keine doppelte Classes Ärger machen!
Habe die CSS so verändert, dass man über die Schriftgröße in Zeile 5 die Größe der Uhr verändern kann. Der Rest der Uhr passt sich automatisch an!
Habe mal wieder die Google-Importschrift herausgenommen und durch "Arial" ersetzt!
Läuft in allen Templates, auch Mobil!

Installation für alle Templates & Mobil

Das Skript und der CSS-Eintrag kann für die Templates (v1-4) in die "Kopf- oder Fußzeile", als Plugin in den "Obere Leiste / footer" oder fürs Xobor (v6) & Mobil in Eigenes Javascript, Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!!
In Zeile 5 kann über die Schriftgröße die Größe der Uhr eingestellt werden!
In Zeile 4, 56, 68 + 7 kann die Farbe der Uhr bestimmt 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
<style>
/* Uhr Hintergrung */
 .clock_date, .title_clock, #clock_div {
  background-color: #000000;
  font-size: 20px !important;
  font-family: "arial", cursive;
  color: #eee;
  box-sizing: border-box;
}
 
/* Titel*/
 
.title_clock {
  text-align: center;
  margin: 10px auto;
}
 
/* Uhr */
.clock_date {  
  display:inline-block;
  border: 1px groove #aaaaaa;
  border-radius: 10px;
  padding: 1rem 2rem;
  width: auto;
  margin:  auto;
}
 
/* Uhrzeit */
#clock_div {
  display: flex;
  justify-content: center;
}
 
/* Datum */
#date_div {
  margin-top:15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
/* Uhrzeit Ziffern */
.square_span {
  border-radius: 10px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin: 1rem 2px;
  width: 50px;
  padding: 7px;
  text-align: center;
  transition: 100ms all;
}
 
/* Wochentag */
.dof_date {
  border-radius: 20%;
  background-color: #444;
  padding: 0.5rem 0.8rem;
  margin-right:20px;
}
 
/* Animation Uhrzeit */
.anim_clock {
  animation: 500ms update ease 1;
}
 
@keyframes update {
  50% {
    background-color: #444;
    transform: scale(1.1);
  }
}
</style>
 

<br>
<center>
<div class="clock_date">
  <h1 class="title_clock">Uhr mit Datum</h1>
  <div id="clock_div"></div>
  <div id="date_div"></div>
</div>
</center>
<br>
 
<script>
let date = new Date();
let prevMin = date.getMinutes();
let prevHour = date.getHours();
 
updateTime();
setInterval(() => {
  updateTime();
}, 1000);
 
function updateTime() {
  const clock = document.getElementById("clock_div");
  date = new Date();
 
  let hour = formatNum(date.getHours());
  let min = formatNum(date.getMinutes());
  let sec = formatNum(date.getSeconds());
 
  clock.innerHTML = `<span id="hour1" class="square_span">${hour}</span>
  <span id="min1" class="square_span">${min}</span>
  <span id="sec1" class="square_span anim_clock">${sec}</span>`;
 
  let dayOfWeek = formatDOF(date.getDay());
  let day = date.getDate();
  let month = formatMonth(date.getMonth());
  let year = date.getFullYear();
 
  let dateDiv = document.getElementById("date_div");
  dateDiv.innerHTML = `<span class="dof_date">${dayOfWeek}</span>
  <span>${day}. ${month} ${year}</span>`;
 
  handleChanges(hour, min);
}
 
function formatNum(num) {
  if (num < 10) num = `0${num}`;
  return num;
}
 
function formatDOF(dayOfWeek) {
  const days = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
  return days[dayOfWeek];
}
 
function formatMonth(month) {
  const months = [
  "Januar",
  "Februar",
  "März",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Dezember"];
 
  return months[month];
}
 
function handleChanges(h, m) {
  const timeoutTime = 500;
  const hourSpan = document.getElementById("hour1");
  const minSpan = document.getElementById("min1");
  if (h != prevHour) {
    prevHour = h;
    hourSpan.classList.toggle("anim_clock");
    setTimeout(() => {
      hourSpan.classList.toggle("anim_clock");
    }, timeoutTime);
  }
 
  if (m != prevMin) {
    prevMin = m;
    minSpan.classList.toggle("anim_clock");
    setTimeout(() => {
      minSpan.classList.toggle("anim_clock");
    }, timeoutTime);
  }
}
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Die Uhr in Funktion: Uhr mit Datum & Herzschlag

Weitere interessante Links:

  • Weltzeituhr - Verschiedene Zeiten anzeigen (4)
  • Das etwas andere Uhren-Skript
  • Countdown(up) - Timer - Zähler - Generatoren

Vielen Dank Daishi, dass wir Deine Idee und Vorschläge hier präsentieren dürfen!
Wolfgang

Daishi, Kipper-Spedition und Gerhard finden das Top!

Antworten

#3 | RE: Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

23.06.2023 21:11 (zuletzt bearbeitet: 23.06.2023 21:15)

Uhr in der Portalseite eingebaut.
--> gugge hier <--

60 Herzschläge in der Minute hat ein Transportunternehmer nur von Samstag 12 Uhr bis Montag 4 Uhr, ansonsten ist der bei 120...

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang und Daishi finden das Top!

Antworten

#4 | RE: Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

24.06.2023 22:48

Ich alter Nörgelsack bin es wieder...
Die Uhr habe ich heute nochmal angepasst - man kann da schön spielen.
Aber nun: auf der mobilen Seite sieht es nicht schön aus. Die Umrandungen der Uhrzeit Ziffern sind zu schmal.
Kann ich den Skript einfach ins CSS mobile Ansicht einfügen und dann verändern?

Grüße aus Radeberg
Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#5 | RE: Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

11.07.2023 08:23 (zuletzt bearbeitet: 11.07.2023 08:59)

Problem gelöst! Jetzt sieht es in der mobilen Ansicht auch gut aus.

/* Uhrzeit Ziffern */
.square_span {
border-radius: 10px;
border-bottom: 2px solid #658ba8;
border-top: 1px solid #658ba8;
margin: 0,5rem 2px;
width: 35px;
padding: 7px; vorher 10px
text-align: center;
transition: 100ms all;
}

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Daishi, 844er und Wolfgang finden das Top!

Antworten

#6 | Große Uhr mit Datum und super Animationen! datum

10.01.2025 12:44 (zuletzt bearbeitet: 12.01.2025 23:03)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3980
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1768

Große Uhr mit Datum und super Animationen!
Aktualisiert 30.04.2025

Hallo ArndtWollte hier die super Uhr präsentieren, die Du auf "Codepen" gefunden hast!

Das Skript und die Uhr selbst, sind zwar riesig, aber genial und etwas ganz besonderes!
In einem animierten Rondel wird die Uhrzeit und das komplette Datum angezeigt!
Zusätzlich kann die Landessprache über eine passende Flagge ausgewählt werden (z.Z. nur im FF)!
Ein Klick auf die Flagge oder das Landeskennzeichen in der Mitte der Uhr, ändert den Monat und den Wochentag in die gewählte Landessprache!

Damit die Super-Uhr im Forum gut dargestellt wird, gut lesbar ist und in allen Browsern funktioniert, auch Mobil (!), habe ich das Skript angepasst!

"100 Year Clock Wheel" auf Codepen von Chris Bolson:

https://codepen.io/cbolson/pen/azoVvZm

Die Super-Uhr hier im Forum mit Auslösegrafik!

Bitte mal anklicken!

Was habe ich gemacht?

Kleine Format Korrekturen durchgeführt!
Weil die Uhr sehr groß ist, wird sie nach einem Mausklick auf eine beliebige Grafik, im Modal-Modus angezeigt!
Die Grafik oder der Auslöselink kann mehrfach und beliebig platziert werden!
Da die Flaggen für die Landesauswahl z.Z. nur im FireFox funktionieren, wurde die Unicodezeichen gegen 2 Buchstaben der Landessprache ausgetauscht!
Mobil wird die Überschrift ausgeblendet und die Uhr so hingerückt, dass das Uhrenfenster an den linken Rand geschoben wird!
Beim Schließen der Uhr wird zur Ausgangsseite zurück navigiert!
Die Größe der Uhr kann über nur einer Angabe beliebig eingestellt werden!

Das komplette Skript wird am besten nach "Eigene Seiten" kopiert.
Der Auslöselink kann beliebig in "Kopf & Fußzeile", "Eigenes JavaScript", "Eigene Seiten" gesetzt oder als "Plugin" angelegt werden.

Das komplette Skript wird am besten nach "Eigene Seiten" kopiert.
Die Adresse der "Eigenen Seite" wird in den Auslöselink eingetragen (Siehe unten)!

Über Zeile 3 kann die Größe der Uhr eingestellt werden (hier 800px).
Über Zeile 307 kann der Text der Überschrift geändert werden!
Zeile 347 sorgt für den Sprung zurück zur Ausgangsseite, wenn der X-Button angeklickt wird!
Soll eine definierte Seite aufgerufen werden, wird die Adresse in Zeile 345 eingetragen!
Zeile 347 muss dann gelöscht oder auskommentiert 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
 
<style>
.backClock {
--clock-size: 800px;
--FarbeZeitFenster: #204a6b;
 
  position: fixed; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.9);
  z-index: 9999998; 
}
.clockTitle { 
  display: inline-block; 
  background: #dddddd;
  font: bold 20px Arial; 
  color: #383838;
  border-radius:10px; 
  margin: 50px auto;
  padding: 5px 20px !important;  
  box-shadow: 0px 0 12px rgba(110,110, 110, 0.7);
}
.clockModal { 
  box-shadow: 0px 0 12px rgba(210, 210, 210, 0.7);
  position: fixed;
  inset: 0;
  margin: auto;
  width: var(--clock-size);
  height: var(--clock-size);
  aspect-ratio: 1;
  place-content: center;
  background: var(--FarbeZeitFenster);
  border-radius: 50%;
  z-index: 9999999;
}
#clockClose {
  position: absolute; 
  top: 0px; 
  right: 15px; 
  color: #f1f1f1; 
  font: bold 40px Arial; 
  padding:20px;
}
#clockClose:hover, .clockClose:focus {
  color: #ff8000; 
  text-decoration: 
  none; cursor: pointer;
}
/* Mobil */
@media (width < 800px) {
  .clockModal {
    left: 0;
    right: auto;
    translate: calc((50% - 2rem) * -1) 0;
  }
  .clockTitle {
    display: none;
  }
}
@media (height < 1000px) {
  .clockTitle {
    display: none;
  }
}
.clockModal::before {
  content: "";
  position: absolute;
  inset: 1px;
  margin: auto;
  background-color: rgba(0 0 10 / 0.7);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 48%,
    50% 48%,
    50% 52%,
    100% 52%,
    100% 100%,
    0 100%
  );
  border-radius: 50%;
  z-index: 20;
}
.clockModal > div {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--clock-d);
  height: var(--clock-d);
  font: calc(var(--clock-size) / 57) Arial;
  aspect-ratio: 1;
  isolation: isolate;
  aspect-ratio: 1;
  border-radius: 50%;
}
 
/* years */
.clockModal > div:nth-of-type(1) {
  --clock-d: calc(var(--clock-size) - 2.5%);
}
/* seconds */
.clockModal > div:nth-of-type(2) {
  --clock-d: calc(var(--clock-size) - 16%);
}
/* minutes */
.clockModal > div:nth-child(3) {
  --clock-d: calc(var(--clock-size) - 24%); 
}
 
/* hours */
.clockModal > div:nth-child(4) {
  --clock-d: calc(var(--clock-size) - 32%);
}
/* day numbers */
.clockModal > div:nth-child(5) {
  --clock-d: calc(var(--clock-size) - 44%);
}
/* month names  */
.clockModal > div:nth-child(6) {
  --clock-d: calc(var(--clock-size) - 55%);
}
/* day names*/
.clockModal > div:nth-child(7) {
  --clock-d: calc(var(--clock-size) - 75%);
}
 
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: 300ms linear;
}
.clock-face > * {  
  position: absolute;
  transform-origin: center;
  white-space: nowrap;
  color: white;
  opacity: 0.75;
 
  &.active {
    opacity: 1;
  }
}
.clockModal > .current-lang-display {
  position: absolute;
  inset: 0;
  margin: auto;
  padding: calc(var(--clock-size) / 80);
  z-index: 100;
  display: grid;
  place-content: center;
  background-color: var(--FarbeZeitFenster);
  border: 1px solid rgba(255 255 255 / 0.25);
  color: white;
  border-radius: 100%;
  width: auto;
  height: calc(var(--clock-size) / 16);
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: 300ms ease-in-out;
  font: calc(var(--clock-size) / 40) Arial;
  outline: none;
  &:focus-visible,
  &:hover {
    background-color: white;
    color: #000000;
  }
}
.current-lang-display::before,
.current-lang-display::after {
 
  content: ": ";
  color: white;
  position: absolute;
  z-index: 199;
  top: 50%;
  right: 0;
  font: calc(var(--clock-size) / 57) Arial;
  translate: calc((var(--clock-size) / 3.0) + (var(--clock-size) - 500px) / 26) calc((-1)*(var(--clock-size) / 89));
}
.current-lang-display::after {
  font: calc(var(--clock-size) / 57) Arial;
  translate: calc((var(--clock-size) / 3.4) + (var(--clock-size) - 500px) / 26) calc((-1)*(var(--clock-size) / 89));
}
dialog {
  width: min(calc(100% - 2rem), 380px);
  padding: 1rem;
  margin:auto;
  border: none;
  border-radius: 999px;
  background: rgba(50 50 50 / 0.5);
  text-align: center;
  aspect-ratio: 1;
  overflow: visible;
 
  @starting-style {
    opacity: 0;
    scale: 0;
  }
  transition: opacity 500ms ease-in,
    scale 500ms cubic-bezier(0.28, -0.55, 0.27, 1.55);
}
 
/* Backdrop styling */
dialog[open]::backdrop {
  background-color: rgba(from black r g b / 0.5);
  backdrop-filter: blur(3px);
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
  transition: opacity 1000ms ease-in; 
}
dialog .btn-dialog-close {
  position: absolute;
  top: 0rem;
  right: 25%;
  padding:4px 4px 5px 5px;
  aspect-ratio: 1;
  width: auto;
  height: 35px;
  border-radius: 100%;
  background-color:  #444444;
  font: 1.1rem Arial;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  transition: rotate 300ms ease-in-out;
  z-index: 11;
  &:focus-visible,
  &:hover {
    rotate: 90deg; background: #aa0000;
  }
}
.language-options {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.language-options > label {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  font: 0.9rem Arial;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: 300ms ease-in-out;
  display: grid;
  place-content: center;
  transform-origin: center;
 
  &.active {
    color: white;
    background: var(--FarbeZeitFenster);
  }
 
  &:focus-visible,
  &:hover {
    scale: 1.1;
    z-index: 2;
  }
}
.language-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: white;
  font: 1.2rem Arial;
  @starting-style {
    opacity: 0;
  }
  transition: opacity 300ms ease-in-out;
}
.flag-icon {
  color: #eeeeee;
  font-size: 1.1rem Arial;
  display: grid;
  place-content: center;
}
.language-options input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
</style>
 
<div class="clickClock" data-date="2025-04-30">
<div class="backClock">
  <div id="clockClose" title="Ansicht schließen!">&times;</div>
  <center><div class="clockTitle">Das 100jährige Uhren Rad mit Auswahl der Sprache!</div></center>
  <div class="clockModal">
    <div>
      <div data-clock="years" data-numbers="101" class="clock-face"></div>
    </div>
    <div>
      <div data-clock="seconds" data-numbers="60" class="clock-face"></div>
    </div>
    <div>
      <div data-clock="minutes" data-numbers="60" class="clock-face"></div>
    </div>
    <div>
      <div data-clock="hours" data-numbers="24" class="clock-face"></div>
    </div>
    <div>
      <div data-clock="days" data-numbers="31" class="clock-face"></div>
    </div>
    <div>
      <div data-clock="months" data-numbers="12" class="clock-face"></div>
    </div>
    <div>
      <div data-clock="day-names" data-numbers="7" class="clock-face"></div>
    </div>
    <button type="button" id="current-lang" class="current-lang-display">DE</button>
  </div>
 
  <dialog id="language-dialog">
    <button type="button" id="btn-dialog-close" class="btn-dialog-close " autofocus="autofocus">&#10005;</button>
    <div id="language-options" class="language-options"></div>
  </dialog>
</div>
</div>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
  $('#clockClose').on('click', function(e){
    e.preventDefault();
    // Definierte Adresse beim Schließen der Uhr (Zeile "History" löschen!)
    location.href='/';
    // Beim Schließen der Uhr zurück zum Ausgangspunkt
    location.href='javascript: history.go(-1);';
    return false;
  });
});
</script>
 
<script>
console.clear();
 
const languageFlags = [
  { code: 'ar-SA', name: 'Arabic (Saudi Arabia)', flag: 'SA' },
  { code: 'cs-CZ', name: 'Czech (Czech Republic)', flag: 'CZ' },
  { code: 'da-DK', name: 'Danish (Denmark)', flag: 'DK' },
  { code: 'de-DE', name: 'German (Germany)', flag: 'DE' },
  { code: 'el-GR', name: 'Greek (Greece)', flag: 'GR' },
  { code: 'en-US', name: 'English (US)', flag: 'US' },
  { code: 'en-GB', name: 'English (UK)', flag: 'GB' },
  { code: 'es-ES', name: 'Spanish (Spain)', flag: 'ES' },
  { code: 'es-MX', name: 'Spanish (Mexico)', flag: 'MX' },
  { code: 'fi-FI', name: 'Finnish (Finland)', flag: 'FI' },
  { code: 'fr-CA', name: 'French (Canada)', flag: 'CA' },
  { code: 'fr-FR', name: 'French (France)', flag: 'FR' },
  { code: 'he-IL', name: 'Hebrew (Israel)', flag: 'IL' },
  { code: 'hi-IN', name: 'Hindi (India)', flag: 'IN' },
  { code: 'hu-HU', name: 'Hungarian (Hungary)', flag: 'HU' },
  { code: 'it-IT', name: 'Italian (Italy)', flag: 'IT' },
  { code: 'ja-JP', name: 'Japanese (Japan)', flag: 'JP' },
  { code: 'ko-KR', name: 'Korean (South Korea)', flag: 'KR' },
  { code: 'nl-NL', name: 'Dutch (Netherlands)', flag: 'NL' },
  { code: 'no-NO', name: 'Norwegian (Norway)', flag: 'NO' },
  { code: 'pl-PL', name: 'Polish (Poland)', flag: 'PL' },
  { code: 'pt-BR', name: 'Portuguese (Brazil)', flag: 'BR' },
  { code: 'pt-PT', name: 'Portuguese (Portugal)', flag: 'PT' },
  { code: 'ro-RO', name: 'Romanian (Romania)', flag: 'RO' },
  { code: 'ru-RU', name: 'Russian (Russia)', flag: 'RU' },
  { code: 'sv-SE', name: 'Swedish (Sweden)', flag: 'SE' },
  { code: 'th-TH', name: 'Thai (Thailand)', flag: 'TH' },
  { code: 'tr-TR', name: 'Turkish (Turkey)', flag: 'TR' },
  { code: 'vi-VN', name: 'Vietnamese (Vietnam)', flag: 'VN' },
  { code: 'zh-CN', name: 'Chinese (Simplified, China)', flag: 'CN' },
];
 
const RADIUS = 140; // Radius of the circle for flag buttons
const defaultRegions = languageFlags.reduce((map, lang) => {
  const baseLang = lang.code.split('-')[0]; // Extract the base language (e.g., 'en' from 'en-US')
  if (!map[baseLang]) {
    map[baseLang] = lang.code;
  }
  return map;
}, {});
 
function getLocale() {
  let language = (navigator.languages && navigator.languages[0]) || navigator.language || 'en-US';
 
  if (language.length === 2) {
    language = defaultRegions[language] || `${language}-${language.toUpperCase()}`;
  }
  return language;
}
 
let locale = getLocale();
 
const currentLangDisplay = document.getElementById('current-lang');
const languageDialog = document.getElementById('language-dialog');
const languageOptionsContainer = document.getElementById('language-options');
const closeButton = document.getElementById('btn-dialog-close');
 
function drawClockFaces() {
    const clockFaces = document.querySelectorAll('.clock-face');
    const currentDate = new Date();
    const currentDay = currentDate.getDate();
    const currentMonth = currentDate.getMonth();
    const currentYear = currentDate.getFullYear();
    const currentWeekday = currentDate.getDay();
    const currentHours = currentDate.getHours();
    const currentMinutes = currentDate.getMinutes();
    const currentSeconds = currentDate.getSeconds();
    const totalDaysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
 
    const weekdayNames = Array.from({ length: 7 }, (_, i) =>
        new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(new Date(2021, 0, i + 3))
    );
    const monthNames = Array.from({ length: 12 }, (_, i) =>
        new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2021, i))
    );
 
    clockFaces.forEach(clockFace => {
        clockFace.innerHTML = '';
 
        const clockType = clockFace.getAttribute('data-clock');
        const numbers = parseInt(clockFace.getAttribute('data-numbers'), 10);
        const RADIUS = (clockFace.offsetWidth / 2) - 20; // Adjusted for padding
        const center = clockFace.offsetWidth / 2;
 
        let valueSet;
        let currentValue;
 
        switch (clockType) {
            case 'seconds':
                valueSet = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
                currentValue = String(currentSeconds).padStart(2, '0');
                break;
            case 'minutes':
                valueSet = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
                currentValue = String(currentMinutes).padStart(2, '0');
                break;
            case 'hours':
                valueSet = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
                currentValue = String(currentHours).padStart(2, '0');
                break;
            case 'days':
                valueSet = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1);
                currentValue = currentDay;
                break;
            case 'months':
                valueSet = monthNames;
                currentValue = currentMonth;
                break;
            case 'years':
                valueSet = Array.from({ length: 101 }, (_, i) => 2000 + i);
                currentValue = currentYear;
                break;
            case 'day-names':
                valueSet = weekdayNames;
                currentValue = currentWeekday;
                break;
            default:
                return;
        }
 
        valueSet.forEach((value, i) => {
            const angle = (i * (360 / numbers));
            const x = center + RADIUS * Math.cos((angle * Math.PI) / 180);
            const y = center + RADIUS * Math.sin((angle * Math.PI) / 180);
            const element = document.createElement('span');
            element.classList.add('number');
            element.textContent = value;
            element.style.left = `${x}px`;
            element.style.top = `${y}px`;
            element.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
 
            clockFace.appendChild(element);
        });
 
        const currentIndex = valueSet.indexOf(
            typeof valueSet[0] === 'string' ? String(currentValue) : currentValue
        );
        const rotationAngle = -((currentIndex / numbers) * 360);
        clockFace.style.transform = `rotate(${rotationAngle}deg)`;
    });
}
 
function rotateClockFaces() {
    const clockFaces = document.querySelectorAll('.clock-face');
 
    const lastAngles = {};
    function updateRotations() {
        const now = new Date();
        const currentSecond = now.getSeconds();
        const currentMinute = now.getMinutes();
        const currentHour = now.getHours();
        const currentDay = now.getDate();
        const currentMonth = now.getMonth(); // 0-indexed
        const currentYear = now.getFullYear();
        const currentWeekday = now.getDay(); // 0 = Sunday, 6 = Saturday
 
        clockFaces.forEach(clockFace => {
            const clockType = clockFace.getAttribute('data-clock');
            const totalNumbers = parseInt(clockFace.getAttribute('data-numbers'), 10);
 
            let currentValue;
            switch (clockType) {
                case 'seconds':
                    currentValue = currentSecond;
                    break;
                case 'minutes':
                    currentValue = currentMinute;
                    break;
                case 'hours':
                    currentValue = currentHour;
                    break;
                case 'days':
                    currentValue = currentDay - 1;
                    break;
                case 'months':
                    currentValue = currentMonth;
                    break;
                case 'years':
                    currentValue = currentYear - 2000;
                    break;
                case 'day-names':
                    currentValue = currentWeekday; // 0 = Sunday
                    break;
                default:
                    return;
            }
 
            const targetAngle = (360 / totalNumbers) * currentValue;
            const clockId = clockFace.id || clockType;
            const lastAngle = lastAngles[clockId] || 0;
            const delta = targetAngle - lastAngle;
            const shortestDelta = ((delta + 540) % 360) - 180; // Normalize between -180 and 180
            const newAngle = lastAngle + shortestDelta;
 
            clockFace.style.transform = `rotate(${newAngle * -1}deg)`;
            lastAngles[clockId] = newAngle;
            const numbers = clockFace.querySelectorAll('.number');
            numbers.forEach((number, index) => {
                if (index === currentValue) {
                    number.classList.add('active');
                } else {
                    number.classList.remove('active');
                }
            });
        });
        requestAnimationFrame(updateRotations);
    }
    updateRotations();
}
 
function createLanguageOptions() {
  const centerX = languageOptionsContainer.offsetWidth / 2;
  const centerY = languageOptionsContainer.offsetHeight / 2;
 
  languageFlags.forEach((lang, index, arr) => {
    const angle = (index / arr.length) * 2 * Math.PI;
    const x = centerX + RADIUS * Math.cos(angle);
    const y = centerY + RADIUS * Math.sin(angle);
 
    const radioWrapper = document.createElement('label');
    radioWrapper.title = lang.name;
    radioWrapper.style.left = `${x}px`;
    radioWrapper.style.top = `${y}px`;
 
    const radioInput = document.createElement('input');
    radioInput.type = 'radio';
    radioInput.name = 'language';
    radioInput.value = lang.code;
 
    if (lang.code === locale) {
      radioInput.checked = true;
      radioWrapper.classList.add('active');
    }
 
    const flag = document.createElement('span');
    flag.classList.add('flag-icon');
    flag.innerText = lang.flag;
 
    radioWrapper.appendChild(radioInput);
    radioWrapper.appendChild(flag);
    languageOptionsContainer.appendChild(radioWrapper);
    radioWrapper.addEventListener('mouseover', () => showTitle(lang.name, radioWrapper));
    radioWrapper.addEventListener('mouseleave', () => hideTitle());
  
    radioInput.addEventListener('change', () => {
      locale = radioInput.value;
      setCurrentLangDisplay(lang);
      drawClockFaces();
      document.querySelector('label.active')?.classList.remove('active');
      radioWrapper.classList.add('active');
      closeDialog();
    });
  });
}
let titleDisplay = null; 
function showTitle(languageName) {
  if (titleDisplay) {
    titleDisplay.remove();
  }
  titleDisplay = document.createElement('div');
    titleDisplay.classList.add('language-title');
    titleDisplay.textContent = languageName;  // Update the title with the language name
    languageOptionsContainer.appendChild(titleDisplay);
}
function hideTitle() {
  if (titleDisplay) {
    titleDisplay.textContent = '';
  }
}
function setCurrentLangDisplay(lang) {
  currentLangDisplay.textContent = lang.flag;
  currentLangDisplay.title = lang.name;
  showTitle(lang.name)
}
function openDialog() {
  languageDialog.showModal();
  createLanguageOptions();
  addDialogCloseListener();
}
function closeDialog() {
  languageDialog.close();
  removeLanguageOptions();
  removeDialogCloseListener();
}
function removeLanguageOptions() {
  languageOptionsContainer.innerHTML = '';
}
function addDialogCloseListener() {
  languageDialog.addEventListener('click', closeDialogOnClickOutside);
}
function removeDialogCloseListener() {
  languageDialog.removeEventListener('click', closeDialogOnClickOutside);
}
function closeDialogOnClickOutside(e) {
  if (e.target === languageDialog) {
    closeDialog();
  }
}
closeButton.addEventListener('click', closeDialog);
currentLangDisplay.addEventListener('click', openDialog);
drawClockFaces();
rotateClockFaces();
setCurrentLangDisplay(languageFlags.find(lang => lang.code === locale));
</script>
 

Schließen

Der Auslöselink ruft die "Eigene Seite" mit dem Skript auf, hier (/page-104774-107.html)!
Somit ist es egal, ob es ein HTML-Code oder ein Foren-Code ist!
Schließt man die Ansicht der Uhr, kehrt man immer zum Ausgangspunkt des Links zurück!
Optional kann auf eine definierte Webseite aufgerufen werden (siehe Skript).
Es können auch mehrere Links vergeben werden, einer im Beitrag, ein weiterer z.B. im Portal!
Link und Grafik müssen dem eigenen Forum noch angepasst werden!

HTML-Link

1
2
 
<b>Die Super-Uhr mit Auslösegrafik!</b>
<a href="/page-104774-107.html"><img style="height:200px;" src="//files.homepagemodules.de/b104774/a_793_dc278d6d.png"></a>
 

Link mit BB-Code

1
2
 
[b]Die Super-Uhr mit Auslösegrafik![/b]
[url=/page-104774-107.html][img]//files.homepagemodules.de/b104774/a_813_bccc441d.jpg[/img][/url]
 

Schließen

Interessante Links aus dem Forum:

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

Bis dann und viel Spaß beim Ausprobieren und Testen!
Wolfgang

Kipper-Spedition und Test2 finden das Top!

Antworten

Moderations-Kommentar:

Fehler behoben: Doppelpunkte der Uhrzeit waren nach Größenänderung der Uhr nicht richtig platziert!
Neu! Mit Auslösegrafik!
Läuft auch gut auf Apple-Endgeräten!

#7 | Update: Das hundertjährige Uhrenrad! datum

25.04.2025 00:00

Update: Das hundertjährige Uhrenrad

@Kipper-Spedition

Hallo ArndtHabe schon seit längerem die Super-Uhr hier im Portal eingebaut und festgestellt, dass die Doppelpunkte der Uhrzeit nicht an ihrem Platz waren!
Damit hat es angefangen...
Ich hatte die Uhr ja so umgebaut, dass man die Größe mit einem Eintrag anpassen konnte.
Die anderen Werte haben sich dann automatisch durch die "VAR-Funktion" nachgestellt.
Habe nochmal alles überprüft und verfeinert!
Jetzt kann man ab einer Größe von 500px noch alles gut erkennen, nichts wird überschrieben oder verdeckt!
Nach oben hin ist alles offen. Selbst bei einer Größe von 1800px bleiben alle Zahlen und Zeichen an der richtigen Stelle!
Selbst mobil kann die Uhr sich sehen lassen!
Hier wird, um Platz zu gewinnen die Überschrift ausgeblendet, die Uhr bis zur Hälfte ganz nach links gerückt und nur ein "X" zum Beenden zusätzlich eingefügt!

Weil die Uhr recht groß ist, habe ich zusätzlich noch eine Auslösegrafik eingebaut, die nach einem Klick die Super-Uhr aufruft!

Habe alles in Beitrag #6 nachgetragen!

Uhrzeit und Datum einmal anders!

Bitte mal anklicken!

Bis dann
Wolfgang

Kipper-Spedition findet das Top!

Antworten

#8 | RE: Update: Das hundertjährige Uhrenrad! datum

25.04.2025 08:32 (zuletzt bearbeitet: 25.04.2025 08:35)

Wow, hübsch, alles! (Für mich am hübschesten das tolle Hintergrundbild hinter Daishis Uhr.)

Zitat von Wolfgang im Beitrag #7
nur ein "X" zum Beenden zusätzlich eingefügt!

Beim Klicken auf das X schließt diese letzte Super-Uhr nur 1 Sekunde und öffnet sich dann wieder...
Joke: vielleicht sollte sie sich automatisch im Sekunden-Takt öffnen und schließen?

(Am 1. April?)

(Und Daishis Uhr öffnet einen neuen Tab und man klickt sich wieder zurück zum Thread bzw. Vorseite, bei den beiden 100jährigen bleibts im Tab. Aber kein Problem!)

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#9 | Fehlersuche: Das hundertjährige Uhrenrad! datum

29.04.2025 08:31

Fehlersuche: Das hundertjährige Uhrenrad!

@Dankeschön

Hallo JanHabe mir das Skript nochmal vorgenommen!
Es sollte so sein, dass nach einem Klick auf das "X" die Uhr geschlossen und zum Ausgangspunkt zurückkehrt, egal von wo die Uhr aufgerufen worden ist!
Wie ich erfahren habe, arbeitest Du mit MAC und iPhone!
Es sieht wohl so aus, dass die zuständige Befehlszeile "window.history.back()" vom MAC nicht erkannt wird!
Hier gibt es eine Lösung mit "history.go(-1)!"!
Habe ich jetzt eingebaut und die Anleitung neu geschrieben!
Das Skript aus Beitrag #6 sollte jetzt gut funktionieren!

Fehler behoben (window.history.back() ausgetauscht)!

Bitte mal anklicken!

Gruß
Wolfgang

Dankeschön findet das Top!

Antworten

#10 | RE: Fehlersuche: Das hundertjährige Uhrenrad! datum

29.04.2025 08:50 (zuletzt bearbeitet: 01.05.2025 14:39)

Zitat von Wolfgang im Beitrag #9
Es sollte so sein, dass nach einem Klick auf das "X" die Uhr geschlossen und zum Ausgangspunkt zurückkehrt, egal von wo die Uhr aufgerufen worden ist!

In Opera genau so, aber in Firefox tut sich gar nichts mehr wenn ich aufs X klicke.... O.o

Edit: Supi, jetzt läufts hin und zurück überall!

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

Externer Bildhoster » « Meine komplette Forum-Iconbar zum herunterladen!

Seite 1 von 2 « Seite 1 2 Seite »

Ähnliche Themen

Antworten

Letzter Beitrag

Rotierende Animation von Bildern - Würfel Animation
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.12.2024 15:19
von

Wolfgang • Zugriffe: 841

Für die Iconbar: Wählbares + aktuelles Datum in Beiträgen einfügen!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

06.09.2024 21:08
von

Wolfgang • Zugriffe: 763

Profil: Last Online & Registrierungs-Datum anzeigen lassen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von ms_fanie

09.05.2024 15:17
von

ms_fanie • Zugriffe: 2209

3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

04.10.2022 06:25
von

Wolfgang • Zugriffe: 1322

Super Kategorienauswahl für das Smiley-Menü - Version 1-3
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 9 06.10.2023 19:50
bienchen • Zugriffe: 4343
Neu! Forum - Lesezeichen dauerhaft verfügbar!
Erstellt im Forum Ankündigungen & Termine, wichtige News. von Wolfgang 3 11.12.2016 19:38
Wolfgang • Zugriffe: 5997
Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 23 28.08.2022 12:59
Wolfgang • Zugriffe: 15549
Emsisoft Anti-Malware mit Dual-Scanner - Super Programm!
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 0 18.04.2014 21:20
Wolfgang • Zugriffe: 4553

@ Taggen - Super Funktion, um Mitglieder direkt zu informieren!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

14.10.2025 08:43
von

Dankeschön • Zugriffe: 2483

Forum Übersicht → XOBOR-Foren und Homepages →

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! → Uhr mit Datum und super Animationen!

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 €