Erstellen eines Countdowns, der hochzählt und mit einem Start-Button aktiviert wird.

Question

Liebes Support Team,

Ich habe einen Countdown von 4min eingerichtet. Nach Ablauf der Zeit wird der Weiter-Button am Ende der Seite wieder eingeblendet.

Ich habe folgende Zeile eingefügt, um den Countdown an einer beliebigen Stelle auf meiner Seite anzeigen zu können:

<div id="countdown" style="text-align: center"></div>

Der Code für den Countdown sieht wie folgt aus:

<script type="text/javascript">
<!--
     var countdown = 240;
var countdownDisplay;
var countdownTimer;
// "submit0" ist der Weiter-Knopf,
// mit "buttonsAuto" kann man auch den Zurück-Knopf ausblenden
var buttonID = "submit0";  
 
function countdownStart() {
  // Next button
  var button = document.getElementById(buttonID);
  // Create countdown element
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  // Init countdown
  document.getElementById("countdown").appendChild(countdownDisplay);
  countdownRefresh();
  // Hide next button
  button.style.display = "none";
  // Start countdown
  countdownTimer = window.setInterval(countDown, 1000);
}
 
function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    // Display nextbutton
    var button = document.getElementById(buttonID);
    button.style.display = "";
    // Remove countdown
    button.parentNode.removeChild(countdownDisplay);
  }
}
 
function countdownRefresh() {
  // Clear
  while (countdownDisplay.lastChild) {
    countdownDisplay.removeChild(countdownDisplay.lastChild);
  }
  // Display
  var minutes = Math.floor(countdown / 60);
var seconds = countdown - 60 * minutes;
var content = document.createTextNode(minutes + ":" + seconds);;
  countdownDisplay.appendChild(content );
}
 
SoSciTools.attachEvent(window, "load", countdownStart);
 
// -->
</script>

• Was ich aber eigentlich möchte ist, dass der Countdown nicht runterläuft, sondern hochzählt.
• Außerdem würde ich gerne einen START-Button integrieren. Also dass der Countdown erst mit Klick auf den Button beginnt.
• Im Idealfall wäre der Countdown auch noch unabhängig vom Weiter-Button, sodass trotzdem die Möglichkeit besteht, vorzeit weiter zur nächsten Seite zu gehen.

Ich würde mich sehr freuen, wenn Sie mir mit meiner Problemstellung weiterhelfen können.

Haben Sie im Voraus bereits vielen Dank!

Answer 1

Was ich aber eigentlich möchte ist, dass der Countdown nicht runterläuft, sondern hochzählt.

Dann starten Sie bitte nicht bei 240, sondenr bei 0:

var countdown = 0;

Und in der Funktion countDown() zählen Sie hoch:

if (countdown < 240) {
    countdown++;

Außerdem würde ich gerne einen START-Button integrieren. Also dass der Countdown erst mit Klick auf den Button beginnt.

Entfernen Sie diese Zeile:

SoSciTools.attachEvent(window, "load", countdownStart);

Und erstellen Sie stattdessen einen Start-Knopf (einfach per HTML <button type="button" id="startButton">), den Sie stattdessen mit dem Aufruf verbinden:

startButton = document.getElementById("startButton");
startButton.addEventListener("click", countdownStart);

Im Idealfall wäre der Countdown auch noch unabhängig vom Weiter-Button, sodass trotzdem die Möglichkeit besteht, vorzeit weiter zur nächsten Seite zu gehen.

Dann blenden Sie den Weiter-Knopf einfach nicht aus. Damit meine ich diese Zeile:

  // Hide next button
  button.style.display = "none";