1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Javascript Countdown mit Nutzereingabe

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von filiop, 11. Januar 2018.

  1. filiop

    filiop Grünschnabel

    Ich möchte einen Countdown programmieren bei dem der Nutzer in ein Formular (welches ich schon zusammengeschustert habe) Minuten und Sekunden eingaben kann. Nach einem Click auf einen Button soll das Formular verschwinden und der Countdown im Format xx:xx erscheinen.
    Bei Ablauf des Countdowns soll ein Alert mit dem Text 'Die Zeit ist Abgelaufen!' erscheinen.

    Ich bin Anfänger und weiß nicht wirklich wie ich das Script für den Countdown machen kann.
    Das Form, welches ich schon habe befindet sich unten. Ich würde mich über Hilfe sehr freuen!
    Vielen Dank im Vorraus!

    Code (HTML5):
    1.            <form>
    2.                 <label for= "minuten">Minuten:
    3.                     <input type="number" id="minuteneingabe" min="0" max="59">
    4.                 </label>
    5.                 <label for= "sekunden">Sekunden:
    6.                     <input type="number" id="sekundeneingabe" min="0" max="59">
    7.                 </label>
    8.                    
    9.                     <input type="button" id="bt1" onclick="settimer();" value="Countdown starten">
    10.              </form>
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Timerscripts gibt es zur Genüge, z. B. dieses hier:
    https://codepen.io/ishanbakshi/pen/pgzNMv
    Versuch mal, es mit deinem Formular zusammen zu bringen und wenn Du nicht zum Ziel kommst, melde dich wieder.
     
  3. filiop

    filiop Grünschnabel

    Mein Problem ist vor allem, dass ich nicht weiß wie ich den Userinput in die function bekomme und wie ich das Formular verschwinden lasse.
     
  4. merzi86

    merzi86 Erfahrenes Mitglied

    Du kannst die Eingabe der Zeit mittels getElementById und dem value Attribut auslesen.

    Code (Javascript):
    1. document.getElementById('minuteneingabe').value
    Dies funktioniert natürlich auch für die Sekunden.

    Die einfachste Variante das Formular "verschwinden" zu lassen ist, das du dem Formular das Style display auf none zu setzen.
    So z.B. wenn das Formular die ID form_zeiteingabe hat.

    Code (Javascript):
    1. document.getElementById('form_zeiteingabe').style.display = 'none';
    Eine andere Variante wäre das Formular aus dem DOM-Tree zu entfernen. Allerdings hat man mit der display none Variante die Möglichkeit das Formular wieder anzeigen zu lassen, ohne das man Formular wieder zusammenbaut oder die Seite neu lädt.
     
  5. filiop

    filiop Grünschnabel

    Vielen Dank!
     
Die Seite wird geladen...