建立一個年齡計算器網站-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 程式碼片段：



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


  <div class="header">
    <h1 id="Age-Calculator">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>

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 



<h2>
  
  
  現場演示
</h2>

<p>您可以在此處查看年齡計算器的現場演示。 </p>

<h2>
  
  
  結論
</h2>

<p>建立這個年齡計算器是一次有益的經歷，它讓我加深了對使用日期和建立互動式 Web 應用程式的理解。我希望您發現這個項目對您自己的學習之旅有用且富有洞察力。請隨意探索程式碼並根據您的需求進行調整。快樂編碼！ </p>

<h2>
  
  
  製作人員
</h2>

<p>這個項目的靈感來自於對簡單有效的年齡計算工具的需求。 </p>

<h2>
  
  
  作者
</h2>