Kalkulator wieku v.2

Oblicz czas jaki upłynął od dnia Twoich urodzin. W polach formularza wprowadź datę urodzenia.

Kalkulator obliczy Twój wiek w przeliczeniu na lata, miesiące, tygodnie oraz dni, minuty i sekundy. W zasadzie kalkulator wieku działa podobnie jak każdy inny kalkulator dni z tą różnicą, że oblicza nasz wiek 😎.

Ile już żyjesz?

Wybierz datę swoich urodzin:

Jak wstawić kalkulator na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim odpowiednie pliki:

index.html
style.css
main.js

I wklejamy poniższe kody źródłowe.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Kalkulator wieku"/>
<meta name="author" content="www.skrip.pl">
<link rel="stylesheet" href="style.css">
<title>Kalkulator wieku</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css">
<script src="main.js"></script>
</head>
<body>
<h1 class="h1" style="text-align: center;">Kalkulator wieku</h1>
<div class="main1">
  <div class="husband">
    <h3 style="text-align: center;">Wybierz datę swoich urodzin:</h3>
    <p>&nbsp;</p>
    <form name="birthday">
      <div class="wife">
        <div class="son"> <span class="date" style="font-weight: 600;">Dzień</span>&nbsp;<b class="dot" style="font-weight: bold;">: </b>&nbsp;
          <select name="day" size="1" class="sel-light">
            <script
                  type="text/javascript">for (var j = 1; j < 32; j++)document.write("<option value=" + j + ">" + j + "</option>");</script>
          </select>
          <span class="date month" style="font-weight: 600;">Miesiąc</span>&nbsp;<b class="dot" style="font-weight: bold;">: </b>&nbsp;
          <select name="month" size="1" class="sel-light">
            <script
                  type="text/javascript">for (var i = 1; i < 13; i++)document.write("<option value=" + i + ">" + mS[i - 1] + "</option>");</script>
          </select>
          <span class="date" style="font-weight: 600;">Rok</span>&nbsp;<b class="dot" style="font-weight: bold;">: </b>&nbsp;
          <select name="year" size="1" class="sel-light">
            <script
                  type="text/javascript">for (var k = startyear; k <= endyear; k++)document.write("<option value=" + k + ">" + k + "</option>");</script>
          </select>
        </div>
      </div>
      <p style="text-align:center;">
        <input class="btn-bubble btn" name="start" onclick="calage()" value="Oblicz czas" type="button" style="width:200px; margin: 0 auto;">
      </p>
      <div class="dane">
        <input name="age" value="Starość nie radość">
        <p class="date1" style="font-weight: 600;">Mineło już:</p>
        <input name="months">
        <input name="daa">
        <input name="hours">
        <input name="min">
        <input name="sec">
        <input name="nbday">
      </div>
    </form>
  </div>
</div>
</body>
</html>

style.css

@import url(https://fonts.googleapis.com/css?family=Poppins);
body {
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
}
.main1 {
  position: relative;
  z-index: 33;
}
.pole {
  width: 100%;
}
.husband {}
.wife {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  z-index: 31;
}
.sel-light {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  margin: 0 auto 1em auto;
  padding: .5em;
  padding-right: 1.5em;
  width: auto;
  width: 150px;
  outline: none;
  font-size: 12pt;
  font-weight: 400;
  text-indent: 0.01px;
  text-overflow: '';
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.01);
  background-repeat: no-repeat;
  background-position: calc(100% - .5em) 50%;
  background-size: 12px;
  transition: all .2s ease-in-out;
}
.sel-light::-ms-expand {
  display: none;
}
.sel-light:focus {
  border-color: #2196f3;
  box-shadow: rgba(100, 100, 100, 0.2) 0 0 3px;
}
/* Light Theme */
.sel-light {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cG9seWdvbiBvcGFjaXR5PSIwLjciIHBvaW50cz0iMCw0IDE2LDQgOCwxMiIvPg0KPC9zdmc+DQo='); /* dark arrow*/
}
.sel-light:active {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBvbHlnb24gb3BhY2l0eT0iMC41IiBwb2ludHM9IjAsNCAxNiw0IDgsMTIiLz48L3N2Zz4=');
}
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  border-radius: 5px;
  margin-bottom: 3em;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin: 15px;
}
.btn-bubble {
  color: white;
  background-color: #2196f3;
  background-repeat: no-repeat;
  cursor: pointer;
}
.btn-bubble:active, .btn-bubble:focus {
  background-color: #ff0000;
  background-repeat: no-repeat;
}
input {
  outline: 0;
  border: solid 1px rgba(0, 0, 0, 0.15);
  margin: 0 0 15px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  width: 300px;
  background: rgba(255, 255, 255, .1);
}
.dane {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  z-index: 32;
}
/* Ripple effect */
@media only screen and (max-width: 600px) {
  .wife {
    width: 350px;
  }
  .date {
    display: none;
  }
  .dot {
    display: none;
  }
  .sel-light {
    width: 70px !important;
  }
  td input {
    width: 200px !important;
  }
}

main.js

// JavaScript Document
// www.skrip.pl

var mS = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
var dat = new Date();
var curday = dat.getDate();
var curmon = dat.getMonth() + 1;
var curyear = dat.getFullYear();
var startyear =  dat.getFullYear()-100;
var endyear = dat.getFullYear();
function checkleapyear(datea) {
    if (datea.getYear() % 4 == 0) {
        if (datea.getYear() % 10 != 0) {
            return true;
        } else {
            if (datea.getYear() % 400 == 0) return true;
            else return false;
        }
    }
    return false;
}

function DaysInMonth(Y, M) {
    with(new Date(Y, M, 1, 12)) {
        setDate(0);
        return getDate();
    }
}

function datediff(date1, date2) {
    var y1 = date1.getFullYear(),
        m1 = date1.getMonth(),
        d1 = date1.getDate(),
        y2 = date2.getFullYear(),
        m2 = date2.getMonth(),
        d2 = date2.getDate();
    if (d1 < d2) {
        m1--;
        d1 += DaysInMonth(y2, m2);
    }
    if (m1 < m2) {
        y1--;
        m1 += 12;
    }
    return [y1 - y2, m1 - m2, d1 - d2];
}

function calage() {
    var calday = document.birthday.day.options[document.birthday.day.selectedIndex].value;
    var calmon = document.birthday.month.options[document.birthday.month.selectedIndex].value;
    var calyear = document.birthday.year.options[document.birthday.year.selectedIndex].value;
    if (curday == "" || curmon == "" || curyear == "" || calday == "" || calmon == "" || calyear == "") {
        alert("proszę uzupełnić pola..!!");
    } else {
        var curd = new Date(curyear, curmon - 1, curday);
        var cald = new Date(calyear, calmon - 1, calday);
        
        var diff = Date.UTC(curyear, curmon, curday, 0, 0, 0) - Date.UTC(calyear, calmon, calday, 0, 0, 0);
        var dife = datediff(curd, cald);
        document.birthday.age.value = dife[0] + " lat, " + dife[1] + " miesięcy, " + dife[2] + " dni";
        var monleft = (dife[0] * 12) + dife[1];
        var secleft = diff / 1000 / 60;
        var hrsleft = (secleft / 60);
        var daysleft = (hrsleft / 24);
        document.birthday.months.value = monleft + " miesięcy";
        document.birthday.daa.value = daysleft + " dni";
        document.birthday.hours.value = hrsleft + " godzin";
        document.birthday.min.value = secleft + " minut";
        document.birthday.sec.value = (secleft*60) + " sekund";
        var as = parseInt(calyear) + dife[0] + 1;
        var diff = Date.UTC(as, calmon, calday, 0, 0, 0) - Date.UTC(curyear, curmon, curday, 0, 0, 0);
        var datee = diff / 1000 / 60 / 60 / 24;
        document.birthday.nbday.value = datee + " dni do Twoich urodzin";
    }
}

Top Stories

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty sposób na zdobycie 1000 GB transferu danych na rok w Orange na kartę

Prosty kalkulator wieku v.2

Kalkulator obliczy Twój wiek w przeliczeniu na lata, miesiące, tygodnie oraz dni, minuty i sekundy.

Kalkulator wieku v.2

Ile już żyjesz?

Wybierz datę swoich urodzin:

Jak wstawić kalkulator na własną stronę?

Samodzielnie:

index.html

style.css

main.js

Można pobrać całość w jednym pliku

WOŚP 2025

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy