MEMBINA KALKULATOR BERASASKAN WEB MUDAH: Guild langkah demi langkah dengan Html CSS Dan JavaScript-tutorial css-php.cn

BUILDING A SIMPLE WEB-BASED CALCULATOR: Step-by-step Guild with Html CSS And JavaScript

Mencipta aplikasi web kalkulator ialah projek yang hebat untuk mempelajari HTML, CSS dan JavaScript. Walaupun kalkulator adalah perkara biasa atau lebih biasa, membina satu daripada awal membantu pemula memahami konsep asas pembangunan web—seperti menstruktur kandungan dengan HTML, elemen penggayaan dengan CSS dan menambahkan fungsi interaktif dengan JavaScript.

Dalam gambaran keseluruhan ini, kami akan menelusuri setiap bahagian kod yang diperlukan untuk membuat kalkulator berfungsi sepenuhnya. Panduan ini bukan sahaja akan menyediakan kod tetapi juga akan menerangkan setiap baris secara terperinci, memastikan anda memahami cara semuanya sesuai bersama. Menjelang penghujung projek ini, anda akan mempunyai kalkulator interaktif yang licin yang boleh anda peribadikan atau kembangkan dengan ciri yang lebih maju.

Ciri-ciri Kalkulator
Kalkulator ini termasuk fungsi asas:

Kawasan paparan untuk menunjukkan input dan hasil semasa.

Butang nombor (0–9) dan butang "00" tambahan.

Butang operasi aritmetik: penambahan ( ), penolakan (-), pendaraban (*), dan pembahagian (/).

Butang khas:

AC untuk mengosongkan input semasa.
DEL untuk memadam aksara terakhir.
/- untuk menogol antara nombor positif dan negatif.
= untuk menilai ungkapan dan menunjukkan hasilnya.

Dengan projek ini, anda akan belajar cara:

Buat antara muka pengguna dengan HTML.
Elemen gaya menggunakan CSS untuk meningkatkan daya tarikan visual.
Laksanakan logik kalkulator menggunakan JavaScript untuk mengendalikan butang
interaksi dan melakukan pengiraan.

LANGKAH 1: STRUKTUR HTML - MEMBINA SUSUN ATUR KALKULATOR

Kod HTML menyediakan struktur asas untuk kalkulator kami. Dalam bahagian ini, kami menentukan unsur-unsur yang akan membentuk kalkulator kami, seperti butang dan kawasan paparan, anda boleh menggunakan mana-mana editor pilihan anda untuk kesan ini, saya secara peribadi lebih suka kod studio Visual. Berikut ialah kod HTML lengkap untuk kalkulator:


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



<p>Explanation</p>

<p>Document Type and Language Declaration:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>

Salin selepas log masuk

Memberitahu penyemak imbas bahawa ini ialah dokumen HTML5.

<html lang="en">

Salin selepas log masuk

Memulakan dokumen HTML dan menentukan bahasa Inggeris sebagai bahasa. Ini membantu enjin carian dan pembaca skrin memahami bahasa dokumen.

Ketua Bahagian:

<head>

Salin selepas log masuk

Mengandungi metadata dan pautan penting kepada dokumen tetapi tidak kelihatan kepada pengguna.

<meta charset="UTF-8">

Salin selepas log masuk

Menetapkan pengekodan aksara, memastikan keserasian dengan kebanyakan bahasa.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Salin selepas log masuk

Menjadikan halaman responsif dengan melaraskan reka letaknya agar muat pada peranti yang berbeza.

<title>Calculator</title>

Salin selepas log masuk

Menetapkan tajuk yang dipaparkan pada tab penyemak imbas.


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



<p>Explanation</p>

<p>Document Type and Language Declaration:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>

Salin selepas log masuk

Pautan ke fail CSS di mana gaya ditentukan.

Susun Letak Kalkulator:

<html lang="en">

Salin selepas log masuk

Pautan ke fail JavaScript yang mengendalikan kefungsian kalkulator.

LANGKAH 2: PENGGAYAAN CSS - MEREKA ANTARA MUKA KALKULATOR

Sekarang kita mempunyai struktur, mari beralih kepada penggayaan. Kod CSS ini akan menjadikan kalkulator kelihatan lebih moden, menambahkan warna, butang bulat, bayang-bayang dan pelarasan reka letak responsif.

<head>

Salin selepas log masuk

Penjelasan

Tetapan Semula dan Fon Asas:

<meta charset="UTF-8">

Salin selepas log masuk

Mengalih keluar pelapik dan jidar lalai, menetapkan saiz kotak kepada kotak sempadan untuk saiz yang konsisten dan menggunakan fon moden.

Penggayaan Badan:

badan: Menggunakan Flexbox untuk memusatkan bekas kalkulator di tengah-tengah skrin dan menggunakan latar belakang kecerunan.

Bekas Kalkulator:

.kalkulator: Menambah pelapik, bucu bulat dan bayangan untuk penampilan yang kemas seperti kad.

Input Paparan:

input: Penggayaan ini memberikan kawasan paparan saiz fon yang besar dan penjajaran kanan, menyerupai paparan kalkulator sebenar.

Penggayaan Butang:

butang .kalkulator: Sediakan butang bulat dengan kesan bayang, warna teks putih dan jarak untuk penjajaran.

.actionbtn, .clearbtn dan .enter: Gaya untuk butang tertentu untuk menyerlahkannya (mis., hijau untuk operator, merah untuk jelas dan oren untuk sama).

LANGKAH 3: DI SINILAH SEMUA LOGIK JAVASCRIPT BERLAKU - MENJADIKAN KALKULATOR BERFUNGSI

Dengan struktur dan gaya yang dicapai dengan baik, mari tambahkan fungsi menggunakan JavaScript. Skrip ini membolehkan kami mengendalikan klik pada butang, melakukan aritmetik dan memaparkan hasil.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Salin selepas log masuk

Penjelasan

Pendengar Acara untuk Pemuatan Halaman:

<title>Calculator</title>

Salin selepas log masuk

Memastikan skrip berjalan selepas semua kandungan HTML dimuatkan.

Pembolehubah Input dan Butang:

<link rel="stylesheet" href="style.css">

Salin selepas log masuk

Memilih kawasan paparan.

<div>



<p>Wraps the entire calculator interface. We’ll apply styles to this container to make it look like a calculator.<br>
</p>

<pre class="brush:php;toolbar:false"><input type="text" placeholder="0">



<p>This is the display area of the calculator, where we show the current number or result. It is disabled, so users can’t type directly.</p>

<p>Buttons:<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Clears the calculator display and resets the current calculation.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Deletes the last entered character.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Toggles between positive and negative values.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>The division operator.</p>

<p>Remaining button elements represent numbers (0–9), operators (+, -, *, /), and a decimal point (.). The = button (class="enter") is used to evaluate the expression.</p>

<p>JavaScript File:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="script.js"></script>

Salin selepas log masuk

Mengumpul semua butang dalam tatasusunan untuk manipulasi mudah.

Acara Klik Butang:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculator{
    border: 1px solid #a2a2a2;
    padding: 20px;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
    width: 272px;
    min-height: 100px;
    border: none;  
    padding: 5px;
    margin: 10px;
    background: transparent;
    font-size: 40px;
    text-align: right;
    cursor: text;
    outline: none;
    color: #fff;
}
input::placeholder{
    color: #fff;
}
.calculator button{
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    border: none;
    box-shadow: -5px 3px 10px rgba(9, 9, 9, 0.5);
    background: transparent;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.calculator .actionbtn{
    color: #1afe17;
}
.calculator .clearbtn{
    background: #f31d1f;
}
.calculator .enter{
    background: #f5881a;
}

Salin selepas log masuk

Menambahkan acara klik pada setiap butang. Bergantung pada butang, tindakan berbeza dilakukan:

Pelarasan Saiz Fon Paparan: Mengurangkan saiz fon apabila panjang input melebihi 10 aksara.

Tanda Sama (=): Menilai ungkapan menggunakan eval() dan memaparkan hasilnya. Jika terdapat ralat (cth., sintaks tidak sah), ia memaparkan "Ralat."

Kosongkan (AC): Menetapkan semula rentetan dan mengosongkan paparan.

Padam (DEL): Mengalih keluar aksara terakhir daripada rentetan dan mengemas kini paparan.

Butang Nombor dan Operator: Menambah nilai butang pada rentetan dan mengemas kini paparan.

Togol Tanda ( /-):

* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

Salin selepas log masuk

Mendarab nombor semasa dengan -1 untuk menogol antara nilai positif dan negatif.

Secara konklusifnya, membina apl web kalkulator yang ringkas tetapi berfungsi menggunakan HTML, CSS dan JavaScript ialah projek yang hebat untuk pemula dan pembangun berpengalaman. Dengan menggabungkan asas struktur yang disediakan oleh HTML dengan teliti, elemen gaya yang dihidupkan dengan CSS dan kefungsian interaktif yang dikuasakan oleh JavaScript, kami boleh mencipta alat intuitif yang bukan sahaja memenuhi tujuan utamanya tetapi juga menunjukkan konsep pembangunan web teras.

Selain itu, projek ini membuka pelbagai kemungkinan untuk penerokaan dan peningkatan selanjutnya. pelajaran yang dipelajari di sini menyediakan asas yang komprehensif untuk projek yang lebih kompleks. Pembangunan web ialah proses pembelajaran yang berterusan dan projek ini mempamerkan cara setiap baris kod menyumbang kepada pengalaman yang berfungsi dan menarik.

Sambil anda terus memperhalusi kemahiran anda, pertimbangkan cara anda boleh menjadikan kalkulator ini lebih mesra pengguna dan berkuasa. Eksperimen dengan reka letak yang berbeza, cuba laksanakan fungsi matematik tambahan. Setiap perubahan yang anda lakukan memperdalam pemahaman anda tentang prinsip pengekodan dan meningkatkan sumber pembangunan anda.

Selamat Pengekodan!

Atas ialah kandungan terperinci MEMBINA KALKULATOR BERASASKAN WEB MUDAH: Guild langkah demi langkah dengan Html CSS Dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!