Javascript countdown


Evildad

Grünschnabel
#1
Schönen guten Tag,

ich habe folgendes Problem.

Ich bin gerade dabei ein Tabellen Browsergame zu programmieren. ( Bin noch Anfänger in PHP)
Dabei möchte ich das ein Countdown runter zählt wenn ich auf bauen drücke. Das ist mit PHP ja auch nicht schwer, nur leider geht das ja nicht in Echtzeit. Also habe ich versucht einen von den Dutzenden Javascript Countdowns die man so findet, um zu bauen. Leider ohne Erfolg da ich nicht mal die Grundlagen von Javascript beherrsche.
Da ich nach meiner Planung nur den Countdown von Javascript brauche wollte ich jetzt eigentlich nicht die ganze Sprache lernen müssen.
Könnt ihr mir da evtl behilflich sein?

Geplant ist es so:

(geb.php)
PHP:
<?php
   echo "<h2>Hauptgebäude</h2>";
   echo "<ul>";
   echo '<li>' . 'Hauptquartier: ' . $geblvl[3];
  
   // $hqcd ist die verbleibende zeit der Countdowns
   if ($hqcd <= 0) { 
   echo $gebhq;   //$gebhq ist das Bauformular
   } else {
   // $cd soll der Countdown an sich sein
     echo $cd;
   }
   echo "</li>" . '<br />';
   echo "</ul>";
?>
(gebvar.php)
PHP:
<?php
//Das Bauformular
  $gebhq = "<form action='gebver.php' method='post'>
         <br />
         <input type='submit' name='bauenhq' value='Bauen'>
         </form>";
?>
(gebver.php)
PHP:
<?php
  $bauhq = $_POST['bauenhq'];

if ($bauhq) {
$cd = //Hier soll dann der Countdown in der Variablen abgespeichert werden
} else {
echo "Fehlermeldung"
}
?>
Und die Restbauzeit sollte auch in der Datenbank abgespeichert werden...

Würde sich jemand evtl dazu bereit erklären mir ein grung Countdown zu schreiben mit einer groben Erklärung was ich anpassen müsste?
In anderen Foren bekomme ich nur als Antwort. "Google" oder "Lerne Java" :(
 
Zuletzt bearbeitet von einem Moderator:

sheel

I love Asm
#2
Hi und Willkommen bei tutorials.de,

Erstens: Java ist nicht das selbe wie Javascript. Ganz und gar nicht.
(Und auch, wenn ich die anderen Foren wiederhole:
Du wirst JS sicher noch öfter brauchen. Lernen schadet nicht)

Der gezeigte PHP-Code ist für das konkrete Problem unwichtig.

Was soll denn genau runtergezählt werden?
Zeit (Minuten:Sekunden, Sekunden, Tage...), Geld, etc.?
In welchem Tempo? Wo (Formularinputzeile, freier Text auf der Website...)?
Soll während dem Zeitablauf wirklich regelmäßig ein Wert in der DB aktualiiert werden?

...und wo liegt das Problem mit dem offenbar schon vorhandenen Versuch?
Wenn du den noch herzeigt geht alles noch einfacher.
 

ComFreek

Mod | @comfreek
Moderator
#3
Auch von mir ein herzliches Hallo :)

JavaScript ist eigentlich ein Muss für jedes Browsergame. Der Trend geht heutzutage wirklich ganz klar in Richtung JavaScript, Interaktivität, AJAX, ... Mittlerweile ist ja AJAX schon eine Standardsache! (Ich habe gerade oben nochmals nachgelesen; du scheinst ein "Tabellen-Browsergame" zu programmieren. Nichtsdestotrotz wirst du in der Webentwicklung nicht um JS herumkommen!)

Ich würde dir abraten, die Restbauzeit in der DB zu speichern. Genau andersrum sollte es der Fall sein: Du speicherst die Anfangszeit und die Länge in der DB, denn man kann wohl schlecht die Restbauzeit immer in der DB aktualisieren.

Zeige bitte deinen aktuellen Versuch her, wie sheel schon schrieb.
Und Googeln schadet in der Tat nicht. Das dritte Suchergebnis liefert schon einen kompletten Code: http://stackoverflow.com/a/1191875/603003 (Anm.: Für die verlinkte Antwort brauchst du kein jQuery, auch wenn es der Seitentitel anmuten lässt.)
 

Evildad

Grünschnabel
#5
Erst mal danke für die vielen Antworten und danke für das bearbeiten vom Beitrag.
Wie schon gesagt, ich bin bei PHP noch Anfänger. Wenn es ums lernen geht bin ich nicht gerade der schnellste und deswegen wollte ich jetzt nicht gleich noch Javascript mit machen.
Das ich es auch noch lernen muss ist mir schon bewusst aber beides zu gleich... Na ja...


Ich habe die Beiträge schon gelesen so wie ein Dutzend weitere. Sie haben mir Leder nicht weiter geholfen.

Ich habe zum umbauen den countdown verwendet.
Javascript:
/*
Author: Benjamin Eckstein
http://www.umingo.de/
You can use this code in any manner so long as the author's
name, Web address and this disclaimer is kept intact.
********************************************************
Usage Sample:
<div id="cID">Init<script>countdown(100000,'cID');</script></div>
*/
function countdown(time,id){
  //time brauchen wir später noch
  t = time;
  //Tage berechnen
  d = Math.floor(t/(60*60*24)) % 24;
  // Stunden berechnen
  h = Math.floor(t/(60*60)) % 24;
  // Minuten berechnen
  // Sekunden durch 60 ergibt Minuten
  // Minuten gehen von 0-59
  //also Modulo 60 rechnen
  m = Math.floor(t/60) %60;
  // Sekunden berechnen
  s = t %60;
  //Zeiten formatieren
  d = (d >  0) ? d+"d ":"";
  h = (h < 10) ? "0"+h : h;
  m = (m < 10) ? "0"+m : m;
  s = (s < 10) ? "0"+s : s;
  // Ausgabestring generieren
  strZeit =d + h + ":" + m + ":" + s;
  // Falls der Countdown noch nicht zurückgezählt ist
  if(time > 0)
  {
    //Countdown-Funktion erneut aufrufen
    //diesmal mit einer Sekunde weniger
    window.setTimeout('countdown('+ --time+',\''+id+'\')',1000);
  }
  else
  {
    //führe eine funktion aus oder refresh die seite
    //dieser Teil hier wird genau einmal ausgeführt und zwar
    //wenn die Zeit um ist.
    strZeit = "Fertig";
  }
  // Ausgabestring in Tag mit id="id" schreiben
  document.getElementById(id).innerHTML = strZeit;
}
//Helfer Funktion erlaubt Counter auch ohne Timestamp
//countdown2(Tage,Stunden,Minuten,Sekunden,ID)
function countdown2(d,h,m,s,id)
{
  countdown(d*60*60*24+h*60*60+m*60+s,id);
}
-->
und die Standartausgabe...

HTML:
<html>
<head>
<script language="JavaScript" src="javascript.js"></script>
</head>
<body>

<span id="cID2">Init<script>countdown(10050,'cID2');</script></span><br>

Viel Spaß mit dem Counter wünscht euch
<a href="http://www.umingo.de">www.umingo.de</a>
</body>
</html>
Mein Problem ist, wie verwende ich PHP variablen in Javascript?
Wie speichere ich Javascript Variablen (Bauzeit) in meiner Datenbank?
Und wie mache ich es das der Countdown nicht von vorne anfängt wenn ich die Seite neu aufrufe? oder mich auslog?
 

ComFreek

Mod | @comfreek
Moderator
#6
Mein Problem ist, wie verwende ich PHP variablen in Javascript?
Siehe hier: http://stackoverflow.com/questions/...-to-a-javascript-variable-and-escape-newlines

Wie speichere ich Javascript Variablen (Bauzeit) in meiner Datenbank?
Siehe hier: http://stackoverflow.com/questions/8191124/send-javascript-variable-to-php-variable
Aber wieso willst du das machen?
Sende nicht die Bauzeit, sondern den Gebäudetyp o. ä.! Dann muss bei PHP-Skript prüfen, ob der Nutzer den ausgewählten Gebäudetyp überhaupt bauen kann und wie lange das dauern würde. Diese beiden Parameter dürfen auf keinen Fall von der Clientseite kommen, sondern müssen von der Serverseite herrühren (DB, Datei, etc.). Ansonsten kann jeder die Bauzeit verfälschen oder Gebäude bauen, zu denen er noch gar nicht imstande ist.

Und wie mache ich es das der Countdown nicht von vorne anfängt wenn ich die Seite neu aufrufe? oder mich auslog?
Siehe deine erste Frage. Du musst die Zeit immer neu übergeben (entweder beim Seitenaufbau oder später per AJAX).

<script language="JavaScript" src="javascript.js"></script>
Setze lieber type="text/javascript" als Attribut ein. Das language-Attribut ist schon lange veraltet.
Außerdem solltest du einen HTML-Doctype verwenden! Wenn du HTML5 nutzt, brauchst du noch nicht einmal das type-Attribut wie letzten Satz erwähnt.


PS: Vielleicht entsteht der Eindruck, dass wir (ich) hier Leute nur mit Links abservieren. Dies ist in diesem Fall aber nur so, weil so ziemlich alles schon im Internet steht und bei einer Google-Suche sofort aufgefunden werden kann.
 

Evildad

Grünschnabel
#7
ComFreek...

Welche abfragen ich bezüglich Gebäudetyp, Abhängigkeiten von anderen Gebäuden, Forschungen oder Ressourcen machen muss ist mir bewusst. Der Erste Code der ganz oben steht ist nur ein Auszug eines tests. Den HTML code und den Javascript code hab ich nur Kopiert von einer Seite die Code schnipzel anbietet.

Zu deinen links. Sie sind sicherlich hilfreich. Aber dafür müsste man Englisch können. Ich weiß das jetzt kommt... "Wie möchtest du Programmieren ohne Englisch" Üben... Üben... Üben...
Dazu müsste ich aber auch eine Verständliche Erklärung bekommen, die ich mir hier erhofft hatte.

Und eins verstehe ich nicht. Ihr beherrscht doch die Script sprach... Wo ist das Problem da mal eine Kurzbeschreibung zu schreiben die genau so lange dauert wie die Texte und Verlinkungen? Für euch ist das doch kein großer Akt so ein Code zu schreiben. Oder?
(PS. möchte euch nicht zu nahe treten, verstehe es einfach nur nicht :( )
 

ComFreek

Mod | @comfreek
Moderator
#8
Würde man hier für jeden einen Codeschnipsel schreiben, würde man ja zu nichts mehr kommen :p
Außerdem ist schon fast alles im Internet dokumentiert. Wenn du eine Funktion aus den Codebeispielen unten in diesem Beitrag nicht verstehst (z. B. JSON.stringify), dann suche doch zuerst einmal im Internet. Das geht viel schneller als hier erst zu fragen und auf eine Antwort zu warten.

Ich hätte dir schon deutsche Links rausgesucht, hätte ich das mit dem Englisch gekannt.

So schleust man PHP-Variablen in JS ein:
PHP:
<script>
  var meineJavaScriptVariable =<?php echo json_encode($meinePHPVariable);?>;
</script>
Um JS-Variablen in der DB zu speichern, musst du sie erst einmal an deinen Server (bei dir: ein PHP-Skript) schicken:
Javascript:
var xhr = new XMLHttpRequest();
xhr.open("POST", deineUrl);
xhr.send("data=" + encodeURIComponent(JSON.stringify(deineJSVariable)));

// Anhand von Events prüfen, ob Senden erfolgreich war
Ich weiß nicht, wie deine JS-Objekte ausschauen. Im obigen Beispiel habe ich einfach sie ins JSON-Format umgewandelt und abgeschickt.

Das mit dem Countdown habe ich bereits oben geschrieben: schleuse die PHP-Variable (aus der DB) ins JS ein.
 

Evildad

Grünschnabel
#9
Top :) damit kann ich was anfangen^^
aber das mit kein englisch hätte ich evtl vorher erwähnen sollen...
Ich weiß, bin ein schwieriger Fall...

Danke :D
Morgen gleich mal testen...
 

Quaese

Moderator
Moderator
#10
Hi,

mein zweiter Link zeigte übrigens die Verwendung von PHP-Variablen in JavaScript und der Countdown war sehr ausführlich kommentiert ... und alles auf Deutsch.

Ciao
Quaese
 

Evildad

Grünschnabel
#12
Moin, hab es jetzt endlich hin bekommen.
Sieht zwar katastrophal aus (finde ich) aber es klappt.
hab aber noch ein kleines Problem.
PHP:
<!DOCTYPE html>
<?php
$btime = 10;


?>
<html lang="en">
    <head>
     
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Test</title>
        <meta name="description" content="">
        <meta name="author" content="Evildad">

        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    </head>

    <body>
        <div>
            <header>
                <h1>Test</h1>
            </header>
         

            <div>
             
             
             
                <?php
                if ($_POST['bauenhq']) {
                    ?><script language='JavaScript'>
                    var Zeit = '<?php echo $btime; ?>';

                    function doTime() {
                     if (Zeit >= 0) {
                    document.formular.count.value = Zeit--;
                    var aktiv = setTimeout('doTime()', 1000);
                      }
                      else {
                    clearTimeout('doTime()');
                    window.location.href='';
                      }
                    }
                    </script>
             
                    <body onLoad='doTime()'>

                    <form name='formular'>
                    Countdown  <input type='text' name='count' size='3'>
                    </form>
                    <?php
                    } else {
                    echo "<form action='new_file2.php' method='post'>
                    <br />
                    <input type='submit' name='bauenhq' value='Bauen'>
                    </form>";
                }
                ?>
            </div>

            <footer>
                <p>
                    &copy; Copyright  by Evildad
                </p>
            </footer>
        </div>
    </body>
</html>
Wie bekomme ich die Fehlermeldung weg wenn post nicht gesetzt ist?
(ps: ist nur ein Test code ohne Datenbank)

Ach und wie kann man dann hacken setzen das das Thema erfolgreich beantwortet wurde? Bin gerade blind und finde das nicht :(
 
Zuletzt bearbeitet:
#15
function countdown(time,id){
//time brauchen wir später noch
t = time;
//Tage berechnen
d = Math.floor(t/(60*60*24)) % 24;
// Stunden berechnen
h = Math.floor(t/(60*60)) % 24;
// Minuten berechnen
// Sekunden durch 60 ergibt Minuten
// Minuten gehen von 0-59
//also Modulo 60 rechnen
m = Math.floor(t/60) %60;
// Sekunden berechnen
s = t %60;
//Zeiten formatieren
d = (d > 0) ? d+"d ":"";
h = (h < 10) ? "0"+h : h;
m = (m < 10) ? "0"+m : m;
s = (s < 10) ? "0"+s : s;
// Ausgabestring generieren
strZeit =d + h + ":" + m + ":" + s;
// Falls der Countdown noch nicht zurückgezählt ist
if(time > 0)
{
//Countdown-Funktion erneut aufrufen
//diesmal mit einer Sekunde weniger
window.setTimeout('countdown('+ --time+',\''+id+'\')',1000);
}
else
{
//führe eine funktion aus oder refresh die seite
//dieser Teil hier wird genau einmal ausgeführt und zwar
//wenn die Zeit um ist.
strZeit = "Fertig";
}
// Ausgabestring in Tag mit id="id" schreiben
document.getElementById(id).innerHTML = strZeit;
}
Hallo ich benutze auch diesen counter, mein problem ist das die tage die 2 monate oder länger betragen nicht richtig angezeigt werden.

Beispiel:
Mein datum in der DB $endstamp = 2019-11-09 00:00:00

Javascript:
Init<script>countdown(<?php echo round((( strtotime($endstamp) - time())),0);?>,'<?php echo $id;?>');</script>
Angezeigt bekomme ich jedoch 4T 02:08:29 obwohl das datum länger al 1 jahr ist.

wo liegt mein fehler?
 

ComFreek

Mod | @comfreek
Moderator
#17
Ein paar Anmerkungen zur Skriptqualität:
  • setTimeout bitte nie mit einem String als Argument aufrufen.
  • Keine globalen Variablen nutzen, wenn es lokale Variablen/Konstanten auch getan hätten --> let/const