Endlosschleife Countdown

S

SpecialFighter

Mitglied
Hallo zusammen,

ich nutze folgendes Countdown Script: http://www.littlewebthings.com/projects/countdown/

Mein Quellcode sieht so aus:
Code: 
<?php
header('Content-Type: text/html; charset=utf-8');
ini_set('session.use_cookies',1);
ini_set('session.use_only_cookies',1);
ini_set('session.use_trans_sid',0);
session_start();       


if (!isset($_SESSION['timestamp']))
    {
        $_SESSION['timestamp'] = 1428417830;
    }


if ( (time() - $_SESSION['timestamp']) >= 15 )
    {                                               
        $_SESSION['timestamp'] = time()+15;
    }

                    
$_SESSION['datum'] = date("d.m.Y",$_SESSION['timestamp']);
$datum_array = explode(".", $_SESSION['datum']);
                
$_SESSION['uhrzeit'] = date("H:i:s",$_SESSION['timestamp']);
$uhrzeit_array = explode(":", $_SESSION['uhrzeit']);                   
    
?>

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .dash .digit {     float: left;  }
    </style>
</head>

<body class="home page page-id-26 page-template page-template-tmp-no-title-php">
    <div id="countdown_dashboard">
        <div class="dash minutes_dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
        </div>           
        <div style="float: left;">:</div>
        <div class="dash seconds_dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
        </div>
    </div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>


<script language="javascript" type="text/javascript">
           
            jQuery(document).ready(function() {
            var day = <? echo $datum_array[0]; ?>;
            var month = <? echo $datum_array[1]; ?>;
            var year = <? echo $datum_array[2]; ?>;
            var hour = <? echo $uhrzeit_array[0]; ?>;
            var min = <? echo $uhrzeit_array[1]; ?>;
            var sec = <? echo $uhrzeit_array[2]; ?>;
           
           
                    jQuery('#countdown_dashboard').countDown({
                                targetDate: {
                                        'day':             day,
                                        'month':     month,
                                        'year':             year,
                                        'hour':         hour,
                                        'min':             min,
                                        'sec':             sec
                                    },
                   
                                // onComplete function
                                onComplete: function() {
                                        alert ('Fertig!')
                                    }
                                })
                    });
        </script>
   
</body>
</html>

Wie müsste der Code aussehen,
damit der Countdown immer wieder von vorne beginnt, wenn dieser durchgelaufen ist?
Im Moment kommt ja immer ein alert "Fertig!"

Vielen Dank schon Mal :)
 
Wie willst Du denn die Zielzeit festlegen für den nächsten Countdown? Eine Stunde weiter? Einen Tag weiter?
Die Wiederholung müsste sich mit einem rekursiven Funktionsaufruf realisieren lassen, etwa so:
Code: 
function myCountdown() {
                    jQuery('#countdown_dashboard').countDown({
                                targetDate: {
                                        'day':             day,
                                        'month':     month,
                                        'year':             year,
                                        'hour':         hour,
                                        'min':             min,
                                        'sec':             sec
                                    },
                  
                                // onComplete function
                                onComplete: function() {
                                        // Hier die neue Zielzeit festlegen
                                        myCountdown();
                                    }
                               });
myCountdown();
Edit: Wenn ich mir vor Augen halte, dass Du die Zielzeit mit PHP ermittelst, könnte ich mir vorstellen, dass Du die neue Zeit wieder vom Server holen willst. Dann wäre es am einfachsten, wenn Du die Seite im onComplete neu lädst mit der Javascript-Funktion reload().
 
Zuletzt bearbeitet:
also im Endeffekt, geht es mir testweise erst Mal nur darum, dass ich einen Countdown habe, welcher von 10 sek anfängt herunter zu zählen,
bei 0 sek wieder von 10 sek beginnt => Endlosschleife.
Und der Countdown darf sich durch einen Reload der Seite nicht unterbrechen lassen bzw, darf nicht von vorne beginnen sondern muss da weitermachen, wo dieser unterbrochen wurde
 
Wenn das so ist, verwendest Du besser die TagetOffset-Option:
Code: 
  targetOffset: {
36  'day':  0,
37  'month':  0,
38  'year':  0,
39  'hour':  0,
40  'min':  0,
41  'sec': 10
42  }
Wenn der Countdown beim Neuladen nicht neu beginnen soll, müsstest Du den Zählerstand z. B. in einem Cookie speichern.
 
Wie das mit dem endlosen Zählen funktioniert, habe ich in meinem ersten Posting erklärt. Du musst den Code von dort nehmen und nur die target-Option austauschen.
 
okay verstehe, habe jetzt den code etwas angepasst, mit Hilfe von target
mein countdown soll ja folgendes machen:

1. Der User besucht die Seite
2. Der PHP Code setzt einen aktuellen timestamp+10 sek in die DB, sollte dieser älter als der jetzige timestamp sein.
3. Von vom Datenbank TimeStamp - den jetzigen timestamp, soll der Counter die Differenz runter rechnen
4. Bei 0 sek, wird mit Hilfe von load eine php Datei geladen, welche in der DB wieder einen TimeStamp + 10 sek setzt
5. Der Counter beginnt von vorn.
(Immer unter dem Aspekt: Der Counter darf sich durch das neuladen der Seite nicht unterbrechen lassen)

Kann das so funktioniere oder habe ich einen Denkfehler?:

Code: 
// Energy Timer
$sql = 'SELECT `energy_time` FROM `user` WHERE `ID` = "'.$_SESSION['user_id'].'"';
$ergebnis = $db->query( $sql );
                                  
if ($ergebnis->num_rows != 0)
    {
        while ($zeile = $ergebnis->fetch_object())
            {
                if ($zeile->energy_time - time() <= 0 ) // Anzahl in Sekunden                            
                    {
                        $punkte_abwesenheit = 0;                      
                        $new_timestamp = time()+10;
                        $update = 'UPDATE  `user` SET `energy_time` = "'.$new_timestamp.'", `energy` = `energy`+"'.$punkte_abwesenheit.'" WHERE `ID` = "'.$_SESSION['user_id'].'"';
                        $result = $db->query( $update );
                        $energy_time = $new_timestamp;
                    }
                else  
                    {
                        $energy_time = $zeile->energy_time;
                    }



  
                $energy_datum = date("d.m.Y",$energy_time);
                $energy_datum_array = explode(".", $energy_datum);
              
                $energy_uhrzeit = date("H:i:s",$energy_time);
                $energy_uhrzeit_array = explode(":", $energy_uhrzeit);                  

            }
    }
  
<script type="text/javascript">
    var day = <? echo $energy_datum_array[0]; ?>;
    var month = <? echo $energy_datum_array[1]; ?>;
    var year = <? echo $energy_datum_array[2]; ?>;
    var hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var min = <? echo $energy_uhrzeit_array[1]; ?>;
    var sec = <? echo $energy_uhrzeit_array[2]; ?>;

            jQuery(document).ready(function myCountdown() {
                    jQuery('#countdown_dashboard').countDown({
                                targetOffset: {
                                        'day':             day,
                                        'month':     month,
                                        'year':             year,
                                        'hour':         hour,
                                        'min':             min,
                                        'sec':             sec
                                    },
               
                                // onComplete function
                                onComplete: function() {
                                        jQuery( "#live_update" ).load( "update_timestamp.php" );  
                                        myCountdown();
                                    }
                               });
                          });
</script>
 
Ja, das sollte schon funktionieren. Wenn ich das richtig sehe, ist allerdings dein Zeitstempel eine absolute Zeit und das bedeutet, dass Du wieder die Option targetDate verwenden müsstest. Außerdem vermisse ich bei deinem Code, wie die Variablen mit dem Zeitstempel beim load aktualisiert werden sollen.
 
Es funktioniert aus folgendem Grund nicht: Dein sec=sec+10 im onComplete wird überschrieben, denn wenn anschließend die Funktion myCountdown aufgerufen wird, werden die Anweisung mit dem Vorbesetzungen der Zeit-Variablen erneut durchlaufen. Dann ist jedoch die Zeit, die diese angeben, schon erreicht. Du musst zunächst mal diese Anweisungen aus der Funktion myCountdown heraus nehmen.
Außerdem wird die PHP-Seite für das load (m.it-neuss.de/test/inc/live_update/counter_update_energy.php) nicht gefunden. Über das Aktualisieren der Zeit-Variablen im onComplete musst Du dir wahrscheinlich noch eingehender Gedanken machen. Am besten informierst Du dich über die jQuery-Funktion ajax().
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück