✔ 2 Fragen zum Timer und eine Art ProgressBar

EuroCent

EuroCent

Klappstuhl 2.0
Hallo...

Ich möchte folgendes erreichen:

Wenn jemand auf beisp.: Bauen klickt und das gewünschte Gebäude braucht 00:35:30
dann soll die zeit realistisch nach unten zählen und bei null soll die seite sich automatisch aktualisieren und der Button Bauen sollte dann wieder aktiv geschaltet werden

Aber wie realisiere ich es genau am besten?

Wäre für jede Hilfe sehr Dankbar

=================================================

Hier nun möchte ich auf einer anderen Seite eine art Statusbalken haben der von 0% bis zu 100% auffüllt jenach dem welches Gebäde sich im Bau befindet

Dies sollte auch dann beim Abschluss also bei 100% automatisch aktualisiert werden

Die Zeiten werden per Datenbank abgerufen und in das Script des jeweiligen Typüs eingesetzt

Nur möchte ich wissen wie ich es realisiere

MfG

Lenox
 
Hi,

zum Thema Countdown solltest du hier im Forum ausreichend Beispiele finden.

Ist der Countdown abgelaufen, wird die Seite aktualisiert. Wie das Aktualisieren aussehen soll, musst du noch festlegen.

Wie ich es lese, wird es nach dem Ablauf notwendig, das Resultat in eine Datenbank zu speichern, die Grafik für das neue Gebäude anzuzeigen und den Button wieder zu aktivieren. Hierfür rufst du nach dem Ablauf des Countdowns eine AJAX-Funktion auf, die ein Script aufruft, dass das Eintragen in die DB übernimmt. Im onreadystatechange-Event des XMLHttpRequest-Objekts werden die Teile des Dokuments aktualisiert.

Beispiel:
Code: 
XMLHttpRequest.onreadystatechange = function(){
  document.getElementById("NameDesBildes").src = "FileDesNeuenBildes.gif";
  document.getElementById("NameDesButtons").disabled = false;
}

Soll allerdings einfach die Seite komplett neu geladen werden, ist das mit location.reload() möglich.

Das zweite Problem lässt sich ebenfalls über einen Countdown lösen. In jedem Durchlauf wird die Breite eines HTML-Elements anteilig erweitert. Ist die Zeit abgelaufen, können wie oben schon angedeutet die Aktualisierungsaktivitäten erfolgen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#ladebalken_holder, #ladebalken_holder * { margin: 0; padding: 0;}
#ladebalken_holder{ border: 1px solid #aaa;
                    width: 100px;
                    display: none;}
#ladebalken{ background: #f00;
             width: 0;
             font-size: 1px;
             line-height: 10px;}
 //-->
</style>
<script type="text/javascript">
  <!--
// Parameter:
// intWidthBar - Breite des Ladebalkens
// intSeks     - Zeit, die der Ladebalken benötigen soll (für 100%)
// strID       - ID des inneren Ladebalkenelements
function initProgBar(intWidthBar, intSeks, strID){
  var dblStep = intWidthBar/intSeks;
  document.getElementById(strID).parentNode.style.display = "block";
  document.getElementById(strID).parentNode.style.width = intWidthBar+"px";
  document.getElementById(strID).style.width = "0px";
  updateProgBar(dblStep, intSeks, 1, strID);
}

function updateProgBar(dblStep, intSeks, intAktSek, strID){
  // Neue Breite berechnen und zuweisen
  document.getElementById(strID).style.width = Math.ceil(dblStep*intAktSek++) + "px";

  if(intAktSek <= intSeks){
    hTimer = window.setTimeout(function(){updateProgBar(dblStep, intSeks, intAktSek, strID)}, 1000);
  }else{
    document.getElementById(strID).parentNode.style.display = "none";

    // DOTO: Updatefunktionen für Dokument
  }
}
 //-->
</script>
</head>
<body>
<button onclick="initProgBar(100, 10, 'ladebalken');">ProgBar</button>
<!-- FOLGENDE ANWEISUNG MUSS IN EINER ZEILE STEHEN -->
<div id="ladebalken_holder"><div id="ladebalken">&nbsp;</div></div>
</body>
</html>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Ich werde dies aus probieren

Allerdings hab ichmit Ajax noch keine Erfahrung so das ich den Automatisches Nachladen nur in dem Element machen könnte

Und bei dem Gebäude wird sich nix ändern ausser dem Wert der Stufe... da es sich hierbei um kein Bild weiter handelt...

Nur sollte eben bei 100% nur dieses Element Aktualisiert werden und der Button zum weiter machen wieder aktiviert werden mehr eigentlich nicht.

Hmm... naja bei dem Counter ist es so das ich nicht wirklich den richtigen finde

Den der Counter sollte nur von einer angegeben Zeit die aus der Datenbank kommt eingelesen und runtergezählt werden.

Hierzu sollte der Cache in dem die zeit schon abgelaufen ist aber dennoch ine restzeit übrig bleibt ebenfalls ständig in die Datenbank eingetragen und der Wert immer Aktualisiert werden... am besten wäre es mit 5 - 10Sekunden wartezeit damit die Datenbank nicht ständig überlastet wird.

Normal würde es auch reichen in dem ich die Startzeit und die Endzeit angebe von daher würde es sich mit der Prozent-Bar erübrigen.

Mir ist es allerdings wichtig das der Balken für jedes Element alleine Arbeit und beim Ende selbst Aktualisiert und es aus dem Element löscht zw. auf hidden stellt

Jedoch werden die Bau massnahmen ebenfalls über die Datenbank abgewickelt daher wäre das löschen aus der Datenbank wärend der Aktualisierun nicht das grosse thema

Beispiel:

Jemand betätigt den Button zum Bauen eines Gebäudes

folgendes würde dann das Script machen:
- es speichert die den Start-Timestamp in die Datenbank
- es speichert die Bau-ID in die Datenbank
- Die Endzeit wird auf die Startzeit angerechnet und ebenfalls unter endzeit gespeichert
- Bauzeit wird ermittelt und gespeichert
- Button wird deaktiviert

Auf der Startseite dann lasse ich den neues Bau auslesen mit der Startzeit und der Endzeit bis zur fertigstellung. Nach der Fertigstellung wird der Bau auftrag aus der Datenbank gelöscht und bei dem User in der Datenbank die Gebäude-Stufe um eins erhöht

In dem Gebäude modus wo man bauen kann benötige ich Javascript nicht da ich es mit PHP realisieren kann

Auf der Hauptseite dann unter Bau-Aufsicht sollte dann dort Javascript zum Einsatz kommen und somit die ermittelte Bauzeit runter gezählt und der Statusbalken füllt sich dann

Ist die Endzeit erreicht soll der Bau aus der Bau-Aufsicht verschwinden und wie oben schon geschrieben in der atenbank Aktualisiert werden

Hoffe man weiss was ich meine und was ich erreichen möchte ^^
 
Habs getestet

Jedoch bin ich nicht zu dem Ergebnis gekommen wie es eigentlich hätte sein sollen *heul*

Dennoch die ProgressBar werd ich wohl sein lassen ^^

Dennoch DANKE
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück