Endlosschleife Countdown

SpecialFighter · 19. April 2015

das wäre ja ggf. Schritt 2.

Aber wenn ich selber 2x den Counter in unterschiedlichen Browsern auf haben, ist auch in dem Fall die Systemzeit gleich ...
trozdem tritt eine Differenz auf

Parantatatam · 19. April 2015

Wie groß ist denn die Differenz, die entsteht?

SpecialFighter · 20. April 2015

nicht wirklich groß, vielleicht eine 1 sek.

Parantatatam · 20. April 2015

Damit bestätigst Du das Problem, was ich gesehen habe: der Countdown wird intern sicherlich mit setInterval gelöst und zu einem beliebigen Zeitpunkt innerhalb einer Sekunde gestartet. Und genau diese Varianz sorgt dafür, dass es so versetzt wirkt. Ich wüsste aber auch nicht sicher, wie man das gut lösen kann. Vielleicht geht es darüber, dass man einen Timeout setzt, der dann ziemlich genau den Interval startet.

Nachtrag: es gibt zwei Sachen, die mir jetzt eingefallen sind, mit denen man das Ganze genauer machen kann:

SpecialFighter · 24. April 2015

ohh, habe nicht bekomme das es einen Nachtrag gab - vielen Dank => schau ich mir Mal in ruhe an.
Bin aber aktuell auf ein weiteres Problem gestoßen,

wollte jetzt 3 counter mit unterschiedlicher Zeit gleichzeitig laufen lassen.
klappt auch super, allerdings nur bedingt...

Wenn Counter 1 bei 00:00 angekommen ist, laufen Counter 2 + 3 nicht mehr
Wenn Counter 2 bei 00:00 angekommen ist, läuft Counter 3 nicht mehr.

Baue ich gerade Mal ne Testseite.
Vllt schon ne Idee woran es liegen kann?

SpecialFighter · 24. April 2015

okay, kann es leider mit einer Testseite nicht reproduzieren

das ist aber mein Script:

Javascript:

<script type="text/javascript">
jQuery(document).ready(function() {
    var energy_day = <? echo $energy_datum_array[0]; ?>;
    var energy_month = <? echo $energy_datum_array[1]; ?>;
    var energy_year = <? echo $energy_datum_array[2]; ?>;
    var energy_hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var energy_min = <? echo $energy_uhrzeit_array[1]; ?>;
    var energy_sec = <? echo $energy_uhrzeit_array[2]; ?>;
   
    function EnergyCountdown() {
        jQuery('#EnergyCountdownDashboard').countDown({
                 targetDate: {
                     'day':            energy_day,
                     'month':    energy_month,
                     'year':        energy_year,
                     'hour':          energy_hour,
                     'min':            energy_min,
                     'sec':            energy_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['energy'] <= $_SESSION['energy_max'])
                              { ?>
                                  energy_sec = energy_sec + 300;
                                  jQuery( "#live_update" ).load( "inc/live_update/counter_update_energy.php"  ); 
                                  EnergyCountdown();
                        <?} ?>

                    }
                 });
    }
    EnergyCountdown();
  });
   
   
jQuery(document).ready(function() {
    var stamina_day = <? echo $stamina_datum_array[0]; ?>;
    var stamina_month = <? echo $stamina_datum_array[1]; ?>;
    var stamina_year = <? echo $stamina_datum_array[2]; ?>;
    var stamina_hour = <? echo $stamina_uhrzeit_array[0]; ?>;
    var stamina_min = <? echo $stamina_uhrzeit_array[1]; ?>;
    var stamina_sec = <? echo $stamina_uhrzeit_array[2]; ?>;
   
    function StaminaCountdown() {
        jQuery('#StaminaCountdownDashboard').countDown({
                 targetDate: {
                     'day':            stamina_day,
                     'month':    stamina_month,
                     'year':        stamina_year,
                     'hour':          stamina_hour,
                     'min':            stamina_min,
                     'sec':            stamina_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['stamina'] <= $_SESSION['stamina_max'])
                              { ?>
                                  stamina_sec = stamina_sec + 300;
                                  jQuery( "#live_update" ).load( "inc/live_update/counter_update_stamina.php"  ); 
                                  StaminaCountdown();
                        <?} ?>

                    }
                 });
    }
    StaminaCountdown();
  });
 

jQuery(document).ready(function() {
    var health_day = <? echo $health_datum_array[0]; ?>;
    var health_month = <? echo $health_datum_array[1]; ?>;
    var health_year = <? echo $health_datum_array[2]; ?>;
    var health_hour = <? echo $health_uhrzeit_array[0]; ?>;
    var health_min = <? echo $health_uhrzeit_array[1]; ?>;
    var health_sec = <? echo $health_uhrzeit_array[2]; ?>;
   
    function HealthCountdown() {
        jQuery('#HealthCountdownDashboard').countDown({
                 targetDate: {
                     'day':            health_day,
                     'month':    health_month,
                     'year':        health_year,
                     'hour':          health_hour,
                     'min':            health_min,
                     'sec':            health_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['health'] <= $_SESSION['health_max'])
                              { ?>
                                  health_sec = health_sec + 300;
                                  jQuery( "#live_update" ).load( "inc/live_update/counter_update_health.php"  ); 
                                  HealthCountdown();
                        <?} ?>

                    }
                 });
    }
    HealthCountdown();
  }); 
</script>

SpecialFighter · 30. April 2015

So, möchte das Thema gerne neu aufgreifen, da ich immer noch keine Lösung gefunden habe.
Mittlerweile gibts auch eine Testseite: http://m.it-neuss.de/test/

- lasst den ersten Countdown runterzählen, so das der erste Wert 100/100 erreicht
- danach ladet die Seite neu, und Ihr werdet sehen, dass die anderen Counter nicht mehr weiter machen
(über den Reset Button könnt Ihr die Werte zurücksetzen um das Szenario zu wiederholen)

Ich verstehe einfach nich warum - hoffe ihr könnt mir helfen - ich verzweifel daran.
hier mein ganzes Script:

Mein PHP File:

PHP:

<?php

$timestamp = time();

// Energy Timer
$sql = 'SELECT `energy`, `energy_max`, `energy_time` FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        if ($timestamp - $zeile->energy_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` = "2"';
            $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);

    }
}


// Stamina Timer
$sql = 'SELECT `stamina`, `stamina_max`, `stamina_time` FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        if ($timestamp - $zeile->stamina_time >= 0 ) // Anzahl in Sekunden
            {
            $punkte_abwesenheit = 0;
            $new_timestamp = time()+15;
            $update = 'UPDATE  `user` SET `stamina_time` = "'.$new_timestamp.'", `stamina` = `stamina`+"'.$punkte_abwesenheit.'" WHERE `ID` = "2"';
            $result = $db->query( $update );
            $stamina_time = $new_timestamp;
        }
        else
        {
            $stamina_time = $zeile->stamina_time;
        }


        $stamina_datum = date("d.m.Y",$stamina_time);
        $stamina_datum_array = explode(".", $stamina_datum);

        $stamina_uhrzeit = date("H:i:s",$stamina_time);
        $stamina_uhrzeit_array = explode(":", $stamina_uhrzeit);

    }
}



// Health Timer
$sql = 'SELECT `health`, `health_max`, `health_time` FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        if ($timestamp - $zeile->health_time >= 0 ) // Anzahl in Sekunden
            {
            $punkte_abwesenheit = 0;
            $new_timestamp = time()+20;
            $update = 'UPDATE  `user` SET `health_time` = "'.$new_timestamp.'", `health` = `health`+"'.$punkte_abwesenheit.'" WHERE `ID` = "2"';
            $result = $db->query( $update );
            $health_time = $new_timestamp;
        }
        else
        {
            $health_time = $zeile->health_time;
        }


        $health_datum = date("d.m.Y",$health_time);
        $health_datum_array = explode(".", $health_datum);

        $health_uhrzeit = date("H:i:s",$health_time);
        $health_uhrzeit_array = explode(":", $health_uhrzeit);


    }
}



// Dashboard Werte
$sql = 'SELECT * FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        $_SESSION['energy']          =  $zeile->energy;
        $_SESSION['energy_max']       =  $zeile->energy_max;
        $_SESSION['stamina']          =   $zeile->stamina;
        $_SESSION['stamina_max']      =   $zeile->stamina_max;
        $_SESSION['health']          =  $zeile->health;
        $_SESSION['health_max']       =  $zeile->health_max;
    }
}

Hier mein HTML File:

HTML:

<?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();

error_reporting(-1);
ini_set('display_errors', false);  /* Alle Fehlermeldungen anziegen lassen. Im "Echtbetrieb" auf "false" setzen! */


include('inc/config.php');
include('inc/functions.php');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">

    <title></title>
</head>

<body>
    <div id="live_update"></div>

    <div class="row">
        <div class="title_wrapper">
            <div style="float: left; margin-right: 30px;">
                <h4 style="color: #fff; margin-bottom: 0px !important;">( <a id="energy_header"><? echo  $_SESSION['energy']; ?>
                </a> / <a id="energy_max_header"><? echo  $_SESSION['energy_max']; ?>
                </a> )</h4><? if ($_SESSION['energy'] < $_SESSION['energy_max'])
                                                            { ?>

                <div id="EnergyCountdownDashboard">
                    <div style="float: left;color: #fff; margin-right:3px;">
                        +
                    </div>

                    <div class="dash minutes_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>

                    <div style="float: left;color: #fff;">
                        :
                    </div>

                    <div class="dash seconds_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>
                </div><? } ?>
                </div>

            <div style="float: left; margin-right: 30px;">
                <h4 style="color: #fff; margin-bottom: 0px !important;">( <a id="stamina_header"><? echo  $_SESSION['stamina']; ?>
                </a> / <a id="stamina_max_header"><? echo  $_SESSION['stamina_max']; ?>
                </a> )</h4><? if ($_SESSION['stamina'] < $_SESSION['stamina_max'])
                                                            { ?>

                <div id="StaminaCountdownDashboard">
                    <div style="float: left;color: #fff; margin-right:3px;">
                        +
                    </div>

                    <div class="dash minutes_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>

                    <div style="float: left;color: #fff;">
                        :
                    </div>

                    <div class="dash seconds_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>
                </div><? } ?>
                </div>

            <div style="float: left; margin-right: 30px;">
                <h4 style="color: #fff; margin-bottom: 0px !important;">( <a id="health_header"><? echo  $_SESSION['health']; ?>
                </a> / <a id="health_max_header"><? echo  $_SESSION['health_max']; ?>
                </a> )</h4><? if ($_SESSION['health'] < $_SESSION['health_max'])
                                                            { ?>

                <div id="HealthCountdownDashboard">
                    <div style="float: left;color: #fff; margin-right:3px;">
                        +
                    </div>

                    <div class="dash minutes_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>

                    <div style="float: left;color: #fff;">
                        :
                    </div>

                    <div class="dash seconds_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>
                </div><? } ?>
                </div>
        </div>
    </div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    var energy_day = <? echo $energy_datum_array[0]; ?>;
    var energy_month = <? echo $energy_datum_array[1]; ?>;
    var energy_year = <? echo $energy_datum_array[2]; ?>;
    var energy_hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var energy_min = <? echo $energy_uhrzeit_array[1]; ?>;
    var energy_sec = <? echo $energy_uhrzeit_array[2]; ?>;

    function EnergyCountdown() {
        jQuery('#EnergyCountdownDashboard').countDown({
                 targetDate: {
                     'day':         energy_day,
                     'month':    energy_month,
                     'year':        energy_year,
                     'hour':        energy_hour,
                     'min':         energy_min,
                     'sec':         energy_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['energy'] <= $_SESSION['energy_max'])
                            { ?>
                                energy_sec = energy_sec + 10;
                                jQuery( "#live_update" ).load( "inc/live_update/counter_update_energy.php"  ); 
                                EnergyCountdown();
                        <?} ?>

                    }
                 });
    }
    EnergyCountdown();
    });


    jQuery(document).ready(function() {
    var stamina_day = <? echo $stamina_datum_array[0]; ?>;
    var stamina_month = <? echo $stamina_datum_array[1]; ?>;
    var stamina_year = <? echo $stamina_datum_array[2]; ?>;
    var stamina_hour = <? echo $stamina_uhrzeit_array[0]; ?>;
    var stamina_min = <? echo $stamina_uhrzeit_array[1]; ?>;
    var stamina_sec = <? echo $stamina_uhrzeit_array[2]; ?>;

    function StaminaCountdown() {
        jQuery('#StaminaCountdownDashboard').countDown({
                 targetDate: {
                     'day':         stamina_day,
                     'month':    stamina_month,
                     'year':        stamina_year,
                     'hour':        stamina_hour,
                     'min':         stamina_min,
                     'sec':         stamina_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['stamina'] <= $_SESSION['stamina_max'])
                            { ?>
                                stamina_sec = stamina_sec + 15;
                                jQuery( "#live_update" ).load( "inc/live_update/counter_update_stamina.php"  ); 
                                StaminaCountdown();
                        <?} ?>

                    }
                 });
    }
    StaminaCountdown();
    });


    jQuery(document).ready(function() {
    var health_day = <? echo $health_datum_array[0]; ?>;
    var health_month = <? echo $health_datum_array[1]; ?>;
    var health_year = <? echo $health_datum_array[2]; ?>;
    var health_hour = <? echo $health_uhrzeit_array[0]; ?>;
    var health_min = <? echo $health_uhrzeit_array[1]; ?>;
    var health_sec = <? echo $health_uhrzeit_array[2]; ?>;

    function HealthCountdown() {
        jQuery('#HealthCountdownDashboard').countDown({
                 targetDate: {
                     'day':         health_day,
                     'month':    health_month,
                     'year':        health_year,
                     'hour':        health_hour,
                     'min':         health_min,
                     'sec':         health_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['health'] <= $_SESSION['health_max'])
                            { ?>
                                health_sec = health_sec + 20;
                                jQuery( "#live_update" ).load( "inc/live_update/counter_update_health.php"  ); 
                                HealthCountdown();
                        <?} ?>

                    }
                 });
    }
    HealthCountdown();
    }); 
    </script>
</body>
</html>

Sempervivum · 30. April 2015

Hast Du mal einen Blick in die Konsole geworfen?:

TypeError: document.getElementById(...) is null
...innerHTML = parseInt(document.getElementById("stamina_dashboard").innerHTML) + 1

Im HTML gibt es kein Element mit der ID "stamina_dashboard".

danach ladet die Seite neu, und Ihr werdet sehen, dass die anderen Counter nicht mehr weiter machen

Kann ich nicht nachvollziehen. Hast Du den Fehler inzwischen behoben?

SpecialFighter · 1. Mai 2015

ahh, die Fehlermeldung kannst du ignorieren, das ist noch eine tote Codezeile, welche ich soeben gelöscht habe ^^
aber hier noch Mal ein Video zu meinem Fehler: http://m.it-neuss.de/test/test.mov

SpecialFighter · 4. Mai 2015

kann dies niemand reproduzieren bzw. nachvollziehen?
P.S. bitte das Thema als "nicht erledigt" markieren

Endlosschleife Countdown

SpecialFighter

Mitglied

Parantatatam

mag Cookies & Kekse

SpecialFighter

Mitglied

Parantatatam

mag Cookies & Kekse

SpecialFighter

Mitglied

SpecialFighter

Mitglied

SpecialFighter

Mitglied

Sempervivum

Erfahrenes Mitglied

SpecialFighter

Mitglied

SpecialFighter

Mitglied

Neue Beiträge