diedVIPs

html knowhow

Berechne dein Alter






Berechne dein Alter

So sieht´s aus

Gebe deine Geburtsdaten ein: (ex: dd/mm/YYYY)

Sie sind

Quellcode
<html>
<head>

<style>
.indent-20 {margin: 10px auto; max-width: 640px;}
.indent-20 input {height: 30px; margin: 0 5px; border: 1px solid #909090; padding: 0 10px; outline: 0; max-width: 320px;} .indent-20 input:hover, .indent-20 input:focus {border-color: #44b2f8; box-shadow: 0px 0px 4px #44b2f8;} .indent-20 #age {padding: 5px;}
.indent-20 #age.wrong {background-color: red; color: #fff;}
.indent-20 #age.success {background-color: #44b2f8; color: #fff;}
</style>
</head>

<body >
<div class='indent-20'>
<p>Gebe deine Geburtsdaten ein: <input id="dob" type="text" placeholder="dd/mm/yyyy"/> (ex: dd/mm/YYYY)</p>
<p>Sie sind <span id="age"></span></p></div>
<script>
(function(){
var elem = document.getElementById('dob'),
age = document.getElementById('age');
elem.addEventListener("change", function(){
if (checkInput(elem.value)){
var ageCount = calculateAge(parseDate(elem.value), new Date());
elem.style.borderColor = '#44b2f8';
elem.style.boxShadow = '0px 0px 4px green';
age.innerHTML = ageCount[0] + ' Jahre und ' + ageCount[1] + ' Tage alt';
age.classList.remove('wrong');
age.classList.add('success');
} else {
elem.style.borderColor = 'red';
elem.style.boxShadow = '0px 0px 4px red';
age.innerHTML = 'Please enter the correct syntax';
age.classList.remove('success');
age.classList.add('wrong'); }
}, false);
function checkInput(textDate){
var getTextDate = textDate;
if(getTextDate == '') {
return true;
} else {
var regularDate = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var matchArray = getTextDate.match(regularDate); // is format OK?
if (matchArray == null) {
return false;
} else {
var matchDay = matchArray[1];
var matchMonth = matchArray[3];
var matchYear = matchArray[5];
if(new Date(matchYear).getFullYear() >= new Date().getFullYear()) {
return false; }
if (matchDay > 31 || matchDay < 1) {
return false;
} else if (matchMonth > 12 || matchMonth < 1) {
return false;
} else if ((matchMonth == 2 || matchMonth == 4 || matchMonth == 6 || matchMonth == 9 || matchMonth == 11) && matchDay == 31) {
return false;
} else if (matchMonth == 2) {
var isleap = (matchYear % 4 == 0 && (matchYear % 100 != 0 || matchYear % 400 == 0));
if (matchDay > 29 || (matchDay == 29 && !isleap)) {
return false;
} else {}
} } }
return true; }
function parseDate(stringText){
var formatText = stringText.split('/');
return new Date(formatText[2], (formatText[1] - 1), formatText[0]); }
function calculateAge(DateFromInput, DateNow){
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var age = Math.round(Math.abs((DateFromInput.getTime() - DateNow.getTime())/(oneDay)));
var resultYear = Math.ceil(age / 365) - 1;
var resultDay = age - (resultYear*365);
var resultage = [];
resultage.push(resultYear, resultDay);
return resultage; } })();
</script>
</body>

</html>




Kontakt    Datenschutz   Impressum