使用HTML CSS和JavaScript进行设计的年龄计算器

在本文中，我们将使用HTML、CSS和JavaScript来创建年龄计算器。

在年龄计算器中，我们将以页面上的日期输入为出生日期，并从该输入打印出年龄。我们将使用HTML创建结构，并使用CSS设计它。JavaScript将用于实现和显示输出。

先决条件

方法

使用 HTML 输入标签创建计算器结构，用于日期输入和提交按钮。
使用 CSS 使用类和元素对结构进行样式设置。
在JavaScript中，使用内置的new Date()方法获取当前日期，并将输入数据转换为可用格式。
- 如果当前日期小于出生日期，则不计算该月份，在减去日期时将当前日期加上一定数量的月份天数，以得到日期之间的差异。
- 如果当前月份小于出生月份，则不算入当前年份，因为该年份尚未完成，为计算月份差异，我们通过将12加到当前月份来进行减法。
- 最后，我们只需要在处理了这两个条件之后减去天数、月份和年份，就可以得到差异。
计算输入日期的年龄差异，并在网页上显示计算的输出如下。

示例： 本示例描述了使用HTML、CSS和Javascript的年龄计算器的基本实现。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Age Calculator</title> 
    <link rel="stylesheet" 
          href="style.css" /> 
</head> 
  
<body> 
    <div class="card"> 
        <header> 
            <h1>AGE CALCULATOR</h1> 
        </header> 
  
        <div> 
            <label>Enter your Date of Birth</label> 
  
            <input id="inputDob" 
                   type="date" 
                   value="2000-01-01" /> 
        </div> 
        <br /> 
  
        <!-- Take the date from which age is to be calculated -->
        <div> 
            <label>Current Date</label><br> 
            <input id="cdate"
                   type="date" 
                   value="" /> 
        </div> 
        <br /> 
  
        <button type="button" 
                onclick="getDOB()"> 
            Calculate 
        </button> 
        <br /> 
        <div id="currentAge"></div> 
        <script src="script.js"></script> 
    </div> 
</body> 
  
</html>

CSS

/* Setting alignment and fonts */
body { 
    display: flex; 
    text-align: center; 
    font-family:  
      "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", 
        sans-serif; 
} 
  
/* Defining card properties */
.card { 
    min-width: 30%; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
    transition: 0.3s; 
    border-radius: 5px; 
    margin: auto; 
    padding: 2%; 
    padding-top: 0%; 
} 
  
header { 
    font-size: larger; 
} 
  
header h1 { 
    background-color: rgb(231, 231, 231); 
    color: green; 
    font-size: xx-large; 
    padding: 1%; 
} 
  
/* Setting font and margin for text before input box */
label { 
    font-size: large; 
    margin: 2%; 
} 
  
button { 
    font-size: large; 
    padding: 1%; 
} 
  
input { 
    width: 200px; 
    height: 50px; 
    font-size: larger; 
    font-family: Arial, Helvetica, sans-serif; 
    text-align: center; 
} 
  
#inputDob { 
    margin: 2%; 
} 
  
p { 
    font-size: larger; 
    margin: 5%; 
} 
  
#currentAge { 
    min-width: 30%; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
    transition: 0.3s; 
    border-radius: 5px; 
    margin: auto; 
    margin-top: 5%; 
    padding: 5%; 
    padding-top: 7%; 
    font-size: larger; 
}

Javascript

// Define funtion to get calculated Age 
function getDOB() { 
  
    // Getting input from html input element 
    let data = 
        document.getElementById("inputDob").value; 
  
    // Convert input data to usable format 
    // as day,month and year 
    let dob = new Date(data); 
    let day = dob.getDate(); 
    let month = dob.getMonth(); 
    let year = dob.getFullYear(); 
  
    // Getting current date and calculating the difference 
    let now = 
        new Date(document.getElementById("cdate").value); 
    console.log(now); 
    let yearDiff = now.getFullYear() - year; 
    let monthDiff = now.getMonth() - month; 
    let dateDiff = now.getDate() - day; 
  
    // Calculating the Age 
    if (yearDiff < 0) console.log("invalid date"); 
    else if (monthDiff > 0) { 
        console.log(yearDiff); 
    } else if (monthDiff === 0 && dateDiff >= 0) { 
        console.log(yearDiff); 
    } else { 
        yearDiff = yearDiff - 1; 
        if (monthDiff <= 0) 
            if (dateDiff > 0) monthDiff = 12 + monthDiff; 
            else monthDiff = 11 - monthDiff; 
    } 
    if (dateDiff < 0) { 
        dateDiff = 30 + dateDiff; 
        monthDiff -= 1; 
    } 
  
    // Show calculated age as output 
    // and invalid if wrong input is given 
    if (yearDiff < 0) 
        document.getElementById("currentAge").innerHTML = "Invalid Date"; 
    else
        document.getElementById("currentAge").innerHTML = 
            "Your current Age is " + yearDiff + " years "
            + monthDiff + " months " + dateDiff + " days"; 
} 
  
// Function to provide default date value 
function currentDate() { 
    console.log(formatted()); 
    let d = document.getElementById("cdate"); 
    d.value = formatted(); 
} 
  
function formatted(date = new Date()) { 
    return [ 
        date.getFullYear(), 
        short(date.getMonth() + 1), 
        short(date.getDate()), 
    ].join("-"); 
} 
function short(num) { 
    return num.toString().padStart(2, "0"); 
} 
  
// Calling current date function to set default date value 
currentDate();