#1

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Uhrzeit-Snippet per JavaScript für NG und Classic

Hier ein JavaScript zur Anzeige des aktuellen Datums mit laufender Uhr.

Das Script selbst muß wie folgt in den <head>-Bereich kopiert 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
<script type="text/javascript">
/* <![CDATA[ */
 
    function tick() {
        var today, sec, min, hrs, day, mth, yrs;
        today = new Date();
        hrs = today.getHours();
        min = today.getMinutes();
        sec = today.getSeconds();
        yrs = today.getYear();
        day = today.getDate();
        mth = today.getMonth() + 1;
        if (sec < 10) sec = '0' + sec;
        if (min < 10) min = '0' + min;
        if (mth == 1) mth = 'Januar';
        if (mth == 2) mth = 'Februar';
        if (mth == 3) mth = 'M&auml;rz';
        if (mth == 4) mth = 'April';
        if (mth == 5) mth = 'Mai';
        if (mth == 6) mth = 'Juni';
        if (mth == 7) mth = 'Juli';
        if (mth == 8) mth = 'August';
        if (mth == 9) mth = 'September';
        if (mth == 10) mth = 'Oktober';
        if (mth == 11) mth = 'November';
        if (mth == 12) mth = 'Dezember';
        if (yrs < 2000) yrs = yrs + 1900;
        timeString = '<span style="font-size: 11px; font-weight: bold; text-shadow: 1px 1px 1px #bbbbbb;">' + day + '. ' + mth + ' ' + yrs + ', ' + hrs + ':' + min + ':' + sec + ' Uhr</span>';
        clock.innerHTML = timeString;
        window.setTimeout('tick()', 100);
    }
 
    window.onload = tick;
 
/* ]]> */
</script>


Dort, wo die Uhr dann im Content erscheinen soll, einfach den folgenden HTML-Clip plazieren:

1
<div id="clock"></div>


That's it - fertig!

Live im Einsatz zu finden in der linken Sidebar ganz oben auf meiner privaten NG-Präsenz.


Hinweis:

Das Script funktioniert übrigens auch wunderbar mit w2d Classic. Die Experten hier wissen, wie und wo man die beiden Schnipsel einbaut. ;) Viel Spaß damit!!


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#2

cojo_1008

Ehrenmitglied  (453 Punkte)  ·   weiblich  ·   Deutschland  ·   Nachricht senden
 https://www.it-passform.de

Das kann man aber auch mittels jquery realisieren - die Datei wird ja sowieso eingebunden ;).

Einfach folgenden Code in einen html-Absatz setzen (Code ist grün):

<div id="clock"></div>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        setInterval(function () {
        var monate = ["Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
        var jetzt = new Date(),
        tag = jetzt.getDate(),
        monat = monate[jetzt.getMonth()],
        jahr = jetzt.getFullYear(),
        stunden = jetzt.getHours(),
        minuten = jetzt.getMinutes(),
        sekunden = jetzt.getSeconds(),
        datum = null,
        zeit = null;
        monat = ((monat < 10) ? '0' + monat : monat);
        tag = ((tag < 10) ? '0' + tag : tag);
        minuten = ((minuten < 10) ? '0' + minuten : minuten);
        sekunden = ((sekunden < 10) ? '0' + sekunden : sekunden);
        datum = tag + '.' + monat + '.' + jahr;
        zeit = +stunden + ':' + minuten + ':' + sekunden;
        $('#clock').html(datum + ', ' + zeit + ' Uhr');
        }, 1000);
    });
//]]>
</script>

Und in der style_design.css oder style_content.css kann man für

#clock {

}

die verschiedensten Formatierungsmöglichkeiten angeben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »cojo_1008« (18.03.2014, 19:30)
2056 Aufrufe | 2 Beiträge