使用 JavaScript 建立狗護理計算器-js教程-PHP中文網

使用 JavaScript 建立狗護理計算器

Linda Hamilton

發布： 2024-12-27 15:57:15

原創

300 人瀏覽過

Creating a Dog Care Calculator Using JavaScript

寵物照顧有時會讓人感到不知所措，但科技可以幫助讓事情變得更簡單。其中一種工具是狗護理計算器，可以幫助寵物主人進行基本計算。在本部落格中，我們將向您展示如何使用 JavaScript 建立簡單的狗飲水量計算器。本指南非常適合喜歡編碼和喜歡寵物的開發者！

為什麼要建立一個狗護理計算器？

此類計算器透過提供每日飲水量、藥物劑量或板條箱尺寸等準確建議來簡化寵物護理。建立自己的工具不僅可以幫助您學習，還可以讓您自訂工具來滿足特定需求。

在本指南中，我們將創建一個狗飲水量計算器，根據狗的體重計算每天需要多少水。

要獲得靈感，請查看我們的狗懷孕計算器，以了解如何實施不同的狗護理計算器。

設定項目

在我們深入研究程式碼之前，請先設定您的專案文件：

為您的專案建立一個新資料夾。
在資料夾內建立三個檔案：
- index.html
- 樣式.css
- script.js

第 1 步：建立 HTML 結構

讓我們從計算器的基本 HTML 佈局開始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dog Water Intake Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>




<hr>

<h2>
  
  
  Step 2: Styling with CSS
</h2>

<p>Now, let’s add some basic styles to make our calculator look clean and user-friendly.<br>
</p>

<pre class="brush:php;toolbar:false">/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

p {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

登入後複製

第 3 步：新增 JavaScript 邏輯

現在是時候為我們的計算器添加功能了。我們將編寫 JavaScript 程式碼來根據狗的體重計算每日飲水量。

// script.js
function calculateWaterIntake() {
    const weight = document.getElementById('dogWeight').value;

    // Ensure weight is entered and valid
    if (!weight || weight <= 0) {
        document.getElementById('result').innerText = "Please enter a valid weight.";
        return;
    }

    // Formula: Dog's weight (kg) * 50ml
    const intake = weight * 50;
    document.getElementById('result').innerText = `Your dog needs ${intake} ml of water daily.`;
}

登入後複製