建立一个年龄计算器网站-css教程-PHP中文网

首页

web前端

css教程

建立一个年龄计算器网站

王林

Aug 10, 2024 am 06:44 AM

Building a Age Calculator Website

介绍

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

项目概况

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

特征

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

使用的技术

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

项目结构

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

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

登录后复制

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

安装

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

克隆存储库：

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

登录后复制

打开项目目录:
```
cd Age-Calculator
```
登录后复制
运行项目:
- 您可以在本地服务器上运行它，也可以简单地在网络浏览器中打开index.html 文件。

用法

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

代码说明

超文本标记语言

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Age Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="header">
    <h1>Age Calculator</h1>
  </div>

  <div class="container">
    <div class="form">
      <p id="birth">Enter your date of birth</p>
      <input type="date" id="birthday" name="birthday">
      <button id="btn">Calculate Age</button>
      <p id="result">Your age is 21 years old</p>
    </div>
  </div>

  <div class="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
</body>
</html>

登录后复制

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);

登录后复制