Mencipta Kalkulator Penjagaan Anjing Menggunakan JavaScript-tutorial js-php.cn

Mencipta Kalkulator Penjagaan Anjing Menggunakan JavaScript

Linda Hamilton

Lepaskan： 2024-12-27 15:57:15

asal

300 orang telah melayarinya

Creating a Dog Care Calculator Using JavaScript

Penjagaan haiwan peliharaan kadangkala boleh terasa berat, tetapi teknologi boleh membantu menjadikan perkara lebih mudah. Satu alat sedemikian ialah kalkulator penjagaan anjing yang membantu pemilik haiwan peliharaan dengan pengiraan penting. Dalam blog ini, kami akan menunjukkan kepada anda cara membuat Kalkulator Pengambilan Air Anjing yang mudah menggunakan JavaScript. Panduan ini sesuai untuk pembangun yang suka pengekodan dan haiwan peliharaan!

Mengapa Membina Kalkulator Penjagaan Anjing?

Kalkulator seperti ini memudahkan penjagaan haiwan peliharaan dengan memberikan pengesyoran yang tepat untuk perkara seperti pengambilan air harian, dos ubat atau saiz peti. Membina sendiri bukan sahaja membantu anda belajar, tetapi ia juga membolehkan anda menyesuaikan alatan untuk memenuhi keperluan tertentu.

Dalam panduan ini, kami akan mencipta Kalkulator Pengambilan Air Anjing yang mengira jumlah air yang diperlukan oleh anjing anda setiap hari berdasarkan beratnya.

Untuk inspirasi, lihat Kalkulator Kehamilan Anjing kami untuk melihat cara kalkulator penjagaan anjing yang berbeza boleh dilaksanakan.

Menyediakan Projek

Sebelum kita menyelami kod, sediakan fail projek anda:

Buat folder baharu untuk projek anda.
Di dalam folder, buat tiga fail:
- index.html
- style.css
- skrip.js

Langkah 1: Mencipta Struktur HTML

Mari mulakan dengan reka letak HTML asas untuk kalkulator kami.

<!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;
}

Salin selepas log masuk

Langkah 3: Menambah Logik JavaScript

Kini tiba masanya untuk menambah kefungsian pada kalkulator kami. Kami akan menulis kod JavaScript untuk mengira pengambilan air harian berdasarkan berat anjing.

// 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.`;
}

Salin selepas log masuk

Langkah 4: Menguji Kalkulator

Untuk menguji kalkulator:

Buka fail index.html dalam penyemak imbas.
Masukkan berat anjing anda dalam kilogram.
Klik butang "Kira" untuk melihat pengambilan air yang disyorkan.

Langkah 5: Meningkatkan Kalkulator (Pilihan)

Berikut ialah beberapa idea untuk menjadikan kalkulator anda lebih baik:

Penukaran Unit: Benarkan pengguna memasukkan berat dalam paun dan menukarnya kepada kilogram.
Penambahbaikan Penggayaan: Tambahkan ikon atau animasi untuk meningkatkan pengalaman pengguna.
Berbilang Pengiraan: Tambah tab atau pilihan untuk kalkulator lain seperti bahagian makanan atau dos ubat.

Kesimpulan

Tahniah! Anda baru sahaja membina Kalkulator Pengambilan Air Anjing yang ringkas dan berfungsi menggunakan JavaScript. Projek ini bukan sahaja membantu pemilik haiwan peliharaan menjaga anjing mereka tetapi juga mempertajam kemahiran pengekodan anda.

Jika anda mendapati ini membantu, lihat kalkulator yang lebih maju di Frontendin.com. Kongsi penyesuaian atau idea anda dalam ulasan di bawah!

Atas ialah kandungan terperinci Mencipta Kalkulator Penjagaan Anjing Menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!