JS: Restliche Sessionlaufzeit anzeigen

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Mittwoch, 24. April 2019 um 09:42 Uhr (17/2019 Kalenderwoche)

geändert: Freitag, 19. Juni 2020 um 14:53 Uhr (25/2020 Kalenderwoche)

Keywords: Sessionlaufzeit restliche ausloggen

Kategorien: JavaScript, PHP,

Text:

Das Skript zeigt die restlichen Minuten an und zählt ab der letzten Minute die Sekunden runter.
Bei 0 wird der Satz "Die Sessionzeit ist abgelaufen!" angezeigt. An dieser Stelle könnte man auch einen Redirect auf die Login-Seite machen ;-), aber Vorsicht bei Formularen. Der Nutzer könnte das nicht lustig finden, wenn er alle Daten erneut eingeben muss.


IDEE: Vielleicht könnte man das auch grafisch darstellen mit:
Stand der Abarbeitung: 65%
Restliche Sekunden
60 Sekunden
1.) Anleitung: selfhtml.org
2.) TechDox: ähnliches Thema #249
3.) TechDox: ähnliches Thema #229


Quellcode:   

<?php
/** Nach dieser Zeit wird das Login-Form mit JS wieder ausgeblendet!
 *  @var integer */
define('ZEIT_UM_LOGIN_AUSZUFUELLN', 10);
?>

<h1>Beispiel für grafisch Darstellung:</h1>
<progress value="4" max="10">Restlicher Zeitraum: 4 Minuten</progress>
<br>

<div id="restlSessionZeitAnzgn">
    <strong title="Zeit gilt ab <?= date('H:i'); ?> Uhr am <?= date('d.m.Y');
    ?>">Restliche Sessionzeit:
        <span id="MinutenAnzeige" style="color: green; font-weight: normal;"
        ><?= ZEIT_UM_LOGIN_AUSZUFUELLN;
            ?> Minuten</span>.</strong>
</div><!-- ENDE: div class="row" -->

<script type="text/javascript">

    var restlMinuten = <?= ZEIT_UM_LOGIN_AUSZUFUELLN ?>;//in Minuten
    var restlSekunden = 60;//60 Sekunden (Countdown ab der letzten Minute)
    var eineMinute = 60000;//60 x 1000 = 60000 (= 1 Minute)
    var ladeZeitNeu;//wird unten gebraucht

    function zeigeVersteckeLoginNachZeit(restlMinuten, restlSekunden) {
        if (restlMinuten < 3) {
            //Letzte Minute ist angebrochen, jetzt Sekunden zeigen...

            if (restlSekunden < 1) {
                //Zeit ist abgelaufen; Die Prozedur nicht erneut laden!
                document.getElementById("restlSessionZeitAnzgn").innerHTML =
                    '<strong>Die Sessionzeit ist abgelaufen!</strong></a>';

            } else {
                //Hier laeuft die Zeit ab!
                document.getElementById("MinutenAnzeige").style.color ="red";
                document.getElementById("MinutenAnzeige").style.fontWeight ="bold";
                document.getElementById("MinutenAnzeige").innerHTML =
                    "noch " + restlSekunden + " Sekunden";

                //Restliche Sekunden um eine verringern
                restlSekunden = restlSekunden - 1;

                //jetzt einfach immer wieder aufrufen (1 x pro Minute)
                ladeZeitNeu = window.setTimeout("zeigeVersteckeLoginNachZeit(\'"
                    + restlMinuten + "\', \'" + restlSekunden + "\')", 1000);

            }//ENDE: else ==> if (restlSekunden < 1)

        } else if (restlMinuten < 1 || restlSekunden < 1) {
            //Hier sollte man nicht mehr hin kommen, aber zur Sicherheit:
            //Zeit ist abgelaufen; Die Prozedur nicht erneut laden!
            document.getElementById("restlSessionZeitAnzgn").innerHTML =
                '<strong>Ihre Sessionzeit ist leider abgelaufen!</strong></a>';

        } else {
            //Restliche Minuten um eine Minute verringern
            restlMinuten = restlMinuten - 1;

            //Hier laeuft die Zeit ab!
            document.getElementById("MinutenAnzeige").innerHTML =
                "noch " + restlMinuten + " Minuten";

            //jetzt einfach immer wieder aufrufen (1 x pro Minute)
            ladeZeitNeu = window.setTimeout("zeigeVersteckeLoginNachZeit(\'"
                + restlMinuten + "\', \'" + restlSekunden + "\')", eineMinute);

        }//ENDE: else ==> if (restlMinuten < 3)

    }//ENDE: function zeigeVersteckeLoginNachZeit()

    //Nach einer Minute (60.000 Milisekunden) geht es los...
    ladeZeitNeu = window.setTimeout("zeigeVersteckeLoginNachZeit("
        + restlMinuten + ", " + restlSekunden + ")", eineMinute);
</script>