Anzeige eines Countdowns in Minuten und Sekunden

Question

Hey,

Ich habe einen Timer von 10 Minuten für eine Seite eingestellt und möchte zudem einen Countdown anzeigen lassen. Der Timer funktioniert und prinzipiell funktioniert auch die Anzeige des Countdowns, nur zeigt diese den Ablauf der Zeit in Milisekunden an. Ich hätte gerne, dass z.B. angezeigt wird "Verbleibende Zeit: 09:56" und nicht "Verbleibende Zeit: 00:556".

Den PHP Code und das Java Skript habe ich von sosci survey.de kopiert und für 10 Minuten angepasst (aber anscheinend nicht so ganz richtig):

PHP:

if (!isset($time0)) {
  $time0 = time();
  registerVariable($time0);  // Die Variable $time0 auch nach Ende des PHP-Codes aufbewahren
}
// Prüfung, ob die Zeit schon abgelaufen ist
// (z.B. weil der Teilnehmer die Seite neu geladen hat)
$timer = 600;  // Der Teilnehmer hat 1 Minute (60 Sekunden) Zeit zur Bearbeitung
if (time() >= $time0 + $timer) {
  goToPage('next');
}
// Die verbleibende Zeit muss auch dem JavaScript-Code bekannt gemacht werden
$remain = $time0 + $timer - time();
replace('%remain%', $remain);

Java Skript:

<script type="text/javascript">
<!--
 
// Funktion zur Weiterleitung
function weiter() {
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
 
// Countdown anzeigen
var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;
function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((timeout - date.getTime() - 50) / 1000);  // Verbleibende Zeit in Sekunden
  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
  }
  while (out.lastChild) {
    out.removeChild(out.lastChild);
  }
  var minutes = Math.floor(time / 600);
  var seconds = String(time - 600 * minutes);
  if (seconds.length < 2) seconds = "0" + seconds;
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  out.appendChild(displayNode);
}
 
// Weiter-Knopf ausblenden (optional)
SoSciTools.submitButtonsHide();
 
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Zusätzlicher Timer für die Aktualisierung des Countdowns
  window.setInterval(updateCountdown, 1000);
  updateCountdown();
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
 
// -->
</script>

Answer 1

Sie haben bei der Trennung der Sekunden in Minuten und Sekunden etwas überschwänglich angepasst, dass eine Minute ab sofort 600 Sekunden hat:

var minutes = Math.floor(time / 600);
var seconds = String(time - 600 * minutes);

Comments

Oh man, das ergibt Sinn. Vielen vielen Dank für die schnelle und hilfreiche Antwort!