Mobirise Tutorials

Altersabfrage

JavaScript zur Errechnung des Alters

Altersabfrage 

Bitte gebe deinen Geburtstag unten ein.

Geburtstag:






Dein Alter ist:

Tutorial

Dieses JavaScript habe ich bei javatpoint.com gefunden und etwas angepasst in Mobirise eingebaut.

Das Skript kopiert ihr in die Seiteneinstellungen in den Bereich "Inside <head> code":

<!-- Age Calculator -->
<script>
function ageCalculator() {
  var userinput = document.getElementById("DOB").value;
  var dob = new Date(userinput);
  if(userinput==null || userinput=='') {
    document.getElementById("message").innerHTML = "Wähle Datum";
    return false;
  } else {
  document.getElementById("message").innerHTML = "";
  
  //calculate month difference from current date in time
  var month_diff = Date.now() - dob.getTime();
  
  //convert the calculated difference in date format
  var age_dt = new Date(month_diff);
  
  //extract year from date
  var year = age_dt.getUTCFullYear();
  
  //now calculate the age of the user
  var age = Math.abs(year - 1970);
  
  //display the calculated age
  return document.getElementById("result").innerHTML =
      age + " Jahre";
  }
}
</script>


Um die Abfrage mit dem Datepicker und der Anzeige basierend auf der ID anzuzeigen, fügt den folgenden Code in einen Mobirise-Block ein. Hier habe ich einen einfachen Textblock aus der Rubrik "Article" verwendet. Siehe auch den Screenshot unten, in dem ihr zusätzlich etwas CSS für das Eingabefeld und den Button sehen könnt.

<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
  Bitte gebe deinen Geburtstag unten ein.<br><br>

  <!-- Choose a date and enter in input field -->
  <b>Geburtstag:</b><br><b><br>
  <input class="form-control" type="date" id="DOB"></b><br>
  <span id="message" style="color:red"> </span> <br><br>

  <!-- Submit date -->
  <button class="btn btn-primary" type="submit" onclick="ageCalculator()"> Errechne das Alter </button> <br><br>

  Dein Alter ist: <span id="result"></span>
</p>

Code Editor

Code für Altersabfrage im Code Editor

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren