Калькулятор возраста с использованием Javascript

Привет, кодеры! Добро пожаловать в блог Codewithrandom. В этой статье мы рассмотрим, как создать Калькулятор возраста в JavaScript. В Калькуляторе возраста ваша дата рождения и другие функции отображают количество дней до вашего следующего дня рождения.

Для создания этого проекта калькулятора возраста использовался JavaScript. Вы должны использовать более практичный проект, изучая что-то новое, поэтому мы решили помочь вам понять это понятие, используя простой калькулятор возраста.

Калькулятор возраста с использованием Javascript[/caption]

Надеюсь, вам понравится наш блог, поэтому давайте начнем с базовой HTML-структуры для Калькулятора возраста.

HTML-код калькулятора возраста: -

JavaScript предлагает несколько встроенных функций даты и времени, которые помогают рассчитать возраст по дате (дате рождения). Используя эти методы JavaScript, вы можете легко найти возраст любого человека. Для этого нам требуется ввод даты от пользователя и текущая системная дата.

<body>
    <div class="container">
        <form>
            <div class="base">
                <div class="enter"><h4>Age Calculator</h4></div>
                <div class="block">
                    <p class="title">Date</p>
                    <input
                        type="text"
                        name="date"
                        id="date"
                        placeholder="dd"
                        required="required"
                        minlength="1"
                        maxlength="2"
                    />
                </div>
                <div class="block">
                    <p class="title">Month</p>
                    <input
                        type="text"
                        name="month"
                        id="month"
                        placeholder="mm"
                        required="required"
                        minlength="1"
                        maxlength="2"
                    />
                </div>
                <div class="block">
                    <p class="title">Year</p>
                    <input
                        type="text"
                        name="year"
                        id="year"
                        placeholder="yyyy"
                        required="required"
                        minlength="4"
                        maxlength="4"
                    />
                </div>
            </div>
            <div class="base">
                <div class="enter">
                    <input
                        type="button"
                        name="submit"
                        value="Submit"
                        onclick="age()"
                    />
                </div>
            </div>
            <div id="age"></div>
        </form>
    </div>
</body>

Мы будем использовать концепции HTML для создания базовой структуры нашего веб-сайта с калькулятором возраста, но сначала мы должны добавить несколько ссылок на файлы в наш html-файл. Создание отдельных файлов для каждого языка и их объединение внутри нашего веб-сайта — это самый простой способ справиться с проектом, который имеет решающее значение при его разработке. Здесь, в разделе заголовка нашего HTML, мы разместим ссылки на наш внешний файл CSS и ссылку на наш файл javascript. Прежде чем тег body будет завершен, мы дополнительно добавим ссылки на эти файлы.

Добавление структуры для нашего калькулятора возраста:

Прежде всего, мы создадим контейнер div, который будет содержать нашу структуру калькулятора.
Теперь мы добавим заголовок в наш калькулятор возраста, используя теги H3.
Теперь мы делаем div с меткой «выберите нашу дату рождения» и вводом типа «рождение» для выбора даты из календаря.
Теперь мы будем отображать текущую дату, используя тот же метод input type="date", и мы отключим свойство, которое позволяет нам изменить текущую дату.
Теперь создадим кнопку с тегом button и добавим к ней функцию onClick.

Давайте посмотрим на нашу структуру HTML без каких-либо стилей.

Вывод HTML-кода для калькулятора возраста

Калькулятор возраста[/caption]

HTML-код калькулятора возраста: -

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #2782e3;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.container {
    width: 520px;
    height: auto;
    margin: 100px auto;
    background-color: #eee;
    border-radius: 25px;
}
.base {
    width: 100%;
    margin: 0;
    overflow: hidden;
    display: block;
    float: none;
}
.block {
    width: 135px;
    padding: 5px 20px;
    margin-left: 20px;
    display: inline-block;
    float: left;
}
.base h4 {
    font-size: 26px;
    text-align: center;
    font-family: sans-serif;
    font-weight: normal;
    margin-top: 0px;
    box-shadow: 0px 2px #bababa;
    background: white;
    font-size: 34px;
    color: navy;
}
.title {
    font-size: 20px;
    text-align: left;
    font-family: sans-serif;
    font-weight: normal;
    line-height: 0.5;
    letter-spacing: 0.5px;
    word-spacing: 2.7px;
    color: #1073d0;
}
input[type="text"] {
    width: 140px;
    margin: auto;
    outline: none;
    min-height: 50px;
    border: 2px solid #1073d0;
    padding: 12px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #1073d0;
    font-size: 17px;
}
input[type="text"]:focus {
    background-color: #ffffff;
    border: 2px solid orange;
    outline: none;
}
input[type="button"] {
    width: 150px;
    margin-left: 35%;
    margin-top: 40px;
    outline: none;
    border: none;
    border-radius: 2px;
    background-color: #0761b6;
    color: #ffffff;
    padding: 14px 16px;
    text-align: center;
    font-size: 16px;
}
input[type="button"]:hover {
    background-color: #003669;
}
#age {
    display: block;
    margin: 10px;
    margin-top: 35px;
    padding: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    font-family: verdana;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.5;
    word-spacing: 2.7px;
    color: navy;
}

Теперь, когда мы включили наш код CSS в нашу статью, давайте рассмотрим его шаг за шагом.

Шаг 1. Мы установим семейство шрифтов «Arial» с помощью селектора тега body и установим цвет фона на «синий» с помощью свойства background. Наше тело настроено с «нулевыми» отступами и полями.

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #2782e3;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}

Шаг 2. Теперь мы добавим ширину и высоту 520 пикселей для ширины и авто для высоты с помощью селектора класса (.container), а также добавим поле в 100 пикселей вокруг контейнера, используя поле свойство. Мы добавили радиус границы 25 пикселей в контейнер нашего калькулятора, используя параметр радиуса границы.

.container {
    width: 520px;
    height: auto;
    margin: 100px auto;
    background-color: #eee;
    border-radius: 25px;
}

Шаг 3. Теперь мы будем стилизовать части калькулятора возраста с помощью селектора классов. Мы зададим нашему тегу h4 размер шрифта 26 пикселей и отцентрируем содержимое, используя свойство text-align. Шрифт отображается «темно-синим».

.block {
    width: 135px;
    padding: 5px 20px;
    margin-left: 20px;
    display: inline-block;
    float: left;
}
.base h4 {
    font-size: 26px;
    text-align: center;
    font-family: sans-serif;
    font-weight: normal;
    margin-top: 0px;
    box-shadow: 0px 2px #bababa;
    background: white;
    font-size: 34px;
    color: navy;
}
.title {
    font-size: 20px;
    text-align: left;
    font-family: sans-serif;
    font-weight: normal;
    line-height: 0.5;
    letter-spacing: 0.5px;
    word-spacing: 2.7px;
    color: #1073d0;
}
input[type="text"] {
    width: 140px;
    margin: auto;
    outline: none;
    min-height: 50px;
    border: 2px solid #1073d0;
    padding: 12px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #1073d0;
    font-size: 17px;
}
input[type="text"]:focus {
    background-color: #ffffff;
    border: 2px solid orange;
    outline: none;
}
input[type="button"] {
    width: 150px;
    margin-left: 35%;
    margin-top: 40px;
    outline: none;
    border: none;
    border-radius: 2px;
    background-color: #0761b6;
    color: #ffffff;
    padding: 14px 16px;
    text-align: center;
    font-size: 16px;
}
input[type="button"]:hover {
    background-color: #003669;
}
#age {
    display: block;
    margin: 10px;
    margin-top: 35px;
    padding: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    font-family: verdana;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.5;
    word-spacing: 2.7px;
    color: navy;
}

Калькулятор вывода возраста HTML и Css

Теперь добавьте javascript для калькулятора возраста. Мы создаем функцию age и получаем все элементы html в javascript, поэтому мы получаем то, что пользователь вводит на входе. После этого мы определяем новый код, который получает текущую дату, месяц и год, чтобы, когда пользователь вводит возрастной javascript, мог выполнять вычисления 2 значений и отображать результат в калькуляторе возраста.

Код JavaScript калькулятора возраста: -

function age() {
    var d1 = document.getElementById("date").value;
    var m1 = document.getElementById("month").value;
    var y1 = document.getElementById("year").value;
    var date = new Date();
    var d2 = date.getDate();
    var m2 = 1 + date.getMonth();
    var y2 = date.getFullYear();
    var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (d1 > d2) {
        d2 = d2 + month[m2 - 1];
        m2 = m2 - 1;
    }
    if (m1 > m2) {
        m2 = m2 + 12;
        y2 = y2 - 1;
    }
    var d = d2 - d1;
    var m = m2 - m1;
    var y = y2 - y1;
    document.getElementById("age").innerHTML =
        "Your Age is " + y + " Years " + m + " Months " + d + " Days";
}

Прежде всего, мы создадим массив количества дней каждого месяца и сохраним их значение в переменной month. Используя селектор document.getELementById, выберите html и сохраните их значение в новых переменных.

Мы смогли получить время и дату устройства с помощью новой функции Date(). Метод JavaScript «Новая дата» можно использовать для получения самых последних дат с вашего устройства. Текущий год, текущая дата и текущий месяц определяют эти три переменные, которые по существу представляют текущее время.

Теперь мы напишем условный оператор, в котором говорится, что нужно добавить значение текущего месяца к текущей дате, если значение нашего текущего месяца меньше 10.

Чтобы определить разницу в возрасте между датой рождения и текущей датой, мы создадим метод с именем ageCalculate() и используем условное выражение if-else. После этого мы просто добавляем эти значения в наш элемент HTML.

Теперь у нас есть функциональность нашего калькулятора возраста. Давайте посмотрим короткое видео, чтобы увидеть, как это работает.

Заключение
Надеюсь, вам понравился Калькулятор возраста в javascript, вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки. Спасибо

В этом посте мы узнаем, как создать javascript-код Калькулятор возраста, используя простые HTML и CSS, а также javascript. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам в легком обучении.

Автор — Code With Random/Anki

Какой редактор кода вы используете для этого проекта Age Calculator?

Я рекомендую использовать VS Code Studio, он очень прост и удобен в использовании.

Является ли этот проект адаптивным или нет?

Да, проект «Калькулятор возраста» адаптивный.

Используете ли вы какие-либо внешние ссылки для создания этого проекта?

Нет, мы создаем калькулятор возраста, используя чистый код Html, Css и JavaScript.

смотрите также:

Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…

Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей

В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning