Beim Tab-Wechsel soll der Countdown stoppen

bhalili

Mitglied
Hallo Freunde, ich habe hier ein kleines Countdown Skript, das am Ende der Laufzeit nach 60 Sekunden einen Text ausgibt. Nun möchte ich, das wenn der User ein weiteres TAB in seinem Browser öffnet der Countdown gestoppt wird und wenn der User auf der Hauptseite ist, wo der Countdown stattfand wieder anfängt zu zählen. Ich habe was im Internet über blur gelesen und ein Beispiel gibt es hier https://jsfiddle.net/72cLu8c0/. Ich bin kein Javascript-Spezialist und würde mich freuen, wenn jemand mal drüberschaut und mein Skript unten modifiziert.

Folgenden Code habe ich für den Countdown, der auch prima funktioniert.
Code:
<script type="text/javascript">
var seconds_left = 60;
var interval = setInterval(function() {
    document.getElementById('timer_div').innerHTML = --seconds_left;
     
    if (seconds_left <= 0)
    {
        document.getElementById('timer_div').innerHTML = 'DONE | <a href="URL">weiter</a>';
        clearInterval(interval);
    }
}, 1000);
</script>

<div id="timer_div"></div>
 
Das mit dem Tab geht nicht . Du kannst das nur machen wenn das Script eint ab öffnet dann kann man darauf zugreifen. Ansonsten hat Javascript kein Zugriff auf andere Tabs. Was Du meinst, ist fokussieren. Wenn Du mit der Maus ins Browserfenster klickst, läuft die Uhr. Klickst Du z. B. anderen Tab angeht die Uhr wieder aus( sollte eigentlich). Ich muss mal gerade gucken ,habe da nee Idee.

*** Link entfernt, weil Seite nicht mehr erreichbar ***

Habe jetzt die beiden Codes zusammen gewürfelt . Jetzt geht es wie Du es wolltest.
Aber denk dran das hat nichts mit den Tabs zu tun nur wenn Du das Fenster aufhast und mit der Maus ins Fenster klickst. Also fokussiert sage ich mal dazu ,dann läuft der Timer weiter
 
Zuletzt bearbeitet:
Wow bastie02, genau so wollte ich das haben. DANKE DANKE DANKE. Wenn du mal in Kassel bist, dann melde dich bei mir (bhalili@hotmail.de).

Hallo basti1012, wenn ich das Script in eine HTML-Datei einfüge zeigt der mir nichts an, komisch.
 
Zuletzt bearbeitet von einem Moderator:
dann binde mal jquery mit ein .
Füge das am Anfang des Scriptes hinzu
Code:
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

Habe es bei codepen auch geändert,damit man es besser sieht
 
Hallo basti1012, habe das jetzt eingefügt und die Fehlermeldung ist auch weg. Das Problem ist jetzt, wenn ich direkt auf die Seite gehe garnichts angezeigt wird, egal ob ich auf die Seite klicke oder nicht. Erst wenn ich zu einem anderen Tab gehe und dann wieder auf die Seite und einen klick durchführe, fängt der Countdown an zu zählen und das stoppen beim wechseln zu anderen Tabs funktioniert. Für mein Projekt müsste der Timer beim Besuch der Seite gleich anfangen zu zählen und erst dann stoppen wenn man zu einem anderen Tab geht und zurück wieder anfängt zu zählen.
 
Zurück