建立一个年龄计算器网站

介绍

各位开发者大家好！今天，我很高兴分享我最近完成的一个项目：年龄计算器。该项目允许用户根据出生日期计算准确的年龄，并在清晰且用户友好的界面中提供结果。这是练习使用 JavaScript（尤其是日期和时间函数）同时构建实用内容的好方法。

项目概况

年龄计算器旨在为用户提供一种简单的方法来了解他们当前的年龄（以年、月和日为单位）。用户只需输入他们的出生日期，然后单击按钮，就会显示他们的年龄。该项目非常适合想要提高处理日期和构建交互式 Web 应用程序技能的开发人员。

特征

• 日期输入：用户可以使用日期选择器输入出生日期，以便准确输入。
• 年龄计算：应用程序计算用户的确切年龄，精确到天数。
• 响应式设计：该工具设计为响应式，确保它在不同的设备和屏幕尺寸上顺利工作。

使用的技术

• HTML：用于构建网页上的内容。
• CSS：用于设计网页样式并确保其在各种设备上响应。
• JavaScript：实现用于处理年龄计算逻辑和更新 DOM。

项目结构

以下是项目结构的快速浏览：

Age-Calculator/
├── index.html
├── style.css
└── script.js

• index.html：包含网页的 HTML 结构。
• style.css：保存 CSS 样式，包括响应式设计规则。
• script.js：使用 JavaScript 管理页面的动态方面。

安装

要开始该项目，请按照以下步骤操作：

1. 克隆存储库：
   

   git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
   

2. 打开项目目录:
   

   cd Age-Calculator
   

3. 运行项目:

   • 您可以在本地服务器上运行它，也可以简单地在网络浏览器中打开index.html 文件。

用法

1. 在网络浏览器中打开网站。
2. 使用日期选择器输入您的出生日期。
3. 点击“计算年龄”按钮即可查看屏幕上显示的您的确切年龄。

代码说明

超文本标记语言

index.html 文件包含网页的结构，包括输入表单和显示计算出的年龄的部分。以下是 HTML 代码片段：

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
  1fc2df4564f5324148703df3b6ed50c1
  4f2fb0231f24e8aef524fc9bf9b9874f
  b2386ffb911b14667cb8f0f91ea547a7Age Calculator6e916e0f7d1e588d4f442bf645aedb2f
  097655f07349bae5bc1e68fdb79ed306
  468dcf7b0ee61aef03af1a1fbe6725fc
  5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  924ff17625d603f964501dd897c96cc6
    4a249f0d628e2318394fd9b75b4636b1Age Calculator473f0a7621bec819994bb5020d29372a
  16b28748ea4df4d9c2150843fecfba68

  4883ec0eb33c31828b7c767c806e14c7
    6aee8d1285fa83b7a99788e2e8734436
      2b836c77cbbab63c3f9e4b62c3ecc02aEnter your date of birth94b3e26ee717c64999d7867364b1b4a3
      53fcc26495096764d98f5e40e6cb0a78
      0daa849bc639fff17b006ca8cf3a07caCalculate Age65281c5ac262bf6d81768915a4a77ac0
      9369b95c0a54fa14078c71ff87b92a53Your age is 21 years old94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68

  ffd6ba4147bda351239915f463e46e38
    e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
  16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 文件包含确保网页具有视觉吸引力和响应能力的样式。以下是一些关键样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Manrope", sans-serif;
  width: 100%;
  height: 100vh;
  background: #2962ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.header {
  margin-bottom: 80px;
  text-align: center;
}
.container {
  background: black;
  color: white;
  width: 600px;
  height: 300px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  font-weight: bold;
  margin: 20px;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0062cc;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}


.footer {
  margin: 70px;
  text-align: center;
}
.footer p{
  font-size: 14px;
  font-weight: 400;
}

JavaScript

script.js 文件管理年龄计算逻辑并在网页上更新结果。以下是 JavaScript 代码片段：

const btnE1 = document.getElementById("btn");
const birthE1 = document.getElementById("birthday");
const resultE1 = document.getElementById("result");

function calculateAge() {
  const birthdayValue = birthE1.value;
  if (birthdayValue === "") {
    alert("Please enter your birthday");
  } else {
    const age = getAge(birthdayValue);
    resultE1.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old.`;
  }
}

function getAge(birthdayValue) {
  const birthdayDate = new Date(birthdayValue);
  const currentDate = new Date();
  let age = currentDate.getFullYear() - birthdayDate.getFullYear();
  const month = currentDate.getMonth() - birthdayDate.getMonth();

  if (
    month < 0 ||
    (month === 0 && currentDate.getDate() < birthdayDate.getDate())
  ) {
    age--;
  }

  return age;
}

btnE1.addEventListener("click", calculateAge);

现场演示

您可以在此处查看年龄计算器的现场演示。

结论

构建这个年龄计算器是一次有益的经历，它让我加深了对使用日期和构建交互式 Web 应用程序的理解。我希望您发现这个项目对您自己的学习之旅有用且富有洞察力。请随意探索代码并根据您的需求进行调整。快乐编码！

制作人员

这个项目的灵感来自于对简单有效的年龄计算工具的需求。

作者

• 阿布舍克·古贾尔
  • GitHub 简介

以上是建立一个年龄计算器网站的详细内容。更多信息请关注PHP中文网其他相关文章！