Rumah >hujung hadapan web >tutorial js >Pengiraan Diskaun Mudah: Cukai, Yuran & Peratusan Diskaun Diterangkan

Pengiraan Diskaun Mudah: Cukai, Yuran & Peratusan Diskaun Diterangkan

Mary-Kate Olsenasal: 2025-01-16 13:12:58975semak imbas

Easy Discount Calculation: Tax, Fees & Discount Percentage Explained

Kalkulator diskaun dibina dengan HTML, CSS dan JavaScript

Artikel ini akan membincangkan kalkulator diskaun yang dibina menggunakan HTML, CSS dan JavaScript. Kami akan memecahkan kod sekeping demi sekeping, menerangkan cara setiap bahagian berfungsi. Di samping itu, arahan akan diberikan tentang cara menguji kalkulator sendiri, dan beberapa cadangan untuk penambahbaikan kod akan disediakan.

[Uji Kod di sini](Uji Kod)

Fungsi Kalkulator

Kalkulator ini direka bentuk untuk membantu pengguna mengira harga akhir item selepas menggunakan diskaun, cukai dan sebarang bayaran tambahan. Ia menerima input harga asal, kuantiti, peratusan diskaun, peratusan cukai dan caj tambahan. Ia kemudian mengira jumlah kos berdasarkan input ini.

Struktur HTML

Berikut ialah struktur asas kod HTML:

<code class="language-html"><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级折扣计算器</title>
    <link rel="stylesheet" href="style.css"> </head>
<body class="discount-body">
    <h1>高级折扣计算器</h1>
    <div class="container discount-container">
        </div>
    <div id="discount-result"></div>
    <script src="script.js"></script>
</body>
</html></code>

Arahan:

Teg DOCTYPE dan HTML : Pengisytiharan <!DOCTYPE html> mentakrifkan jenis dokumen, dalam kes ini HTML5. Teg <html> mengandungi semua kandungan HTML.
Bahagian Kepala: Di dalam teg <head>, kami mempunyai teg meta untuk menetapkan charset dan viewport untuk reka bentuk responsif. Teg <title> mentakrifkan tajuk halaman yang dipaparkan dalam tab penyemak imbas.
Bahagian Badan: Badan halaman mengandungi kandungan sebenar yang akan berinteraksi dengan pengguna. Di sini, kami menggunakan tag <h1> sebagai tajuk utama dan <div> sebagai bekas yang mengandungi unsur bentuk.

Gaya CSS

Sekarang, mari kita bincangkan CSS untuk menggayakan kalkulator:

<code class="language-css">body.discount-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f3f4f6;
    color: #333;
    box-sizing: border-box;
}</code>

Segmentasi:

body.discount-body: Kami menggunakan gaya biasa pada badan, seperti menetapkan keluarga fon kepada Arial, menambahkan pelapik di sekeliling kandungan dan menetapkan warna latar belakang yang cerah. box-sizing: border-box;Pastikan pelapik dan sempadan disertakan dalam lebar dan ketinggian keseluruhan elemen.

<code class="language-css">h1.discount-heading {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 24px;
}</code>

h1.discount-heading: Tajuk berada di tengah, warna hijau (#28a745), terdapat jidar di bahagian bawah dan saiz fon ialah 24px.

<code class="language-css">.container.discount-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #28a745;
}</code>

.container.discount-container: Bahagian ini menggayakan bekas yang menempatkan semua input dan butang borang. Ia mempunyai lebar maksimum 500px, dipusatkan secara mendatar menggunakan margin: 0 auto; dan mempunyai jidar hijau. box-shadowBuat bayang halus di sekeliling bekas untuk memberikan kedalaman.

Fungsi JavaScript

Fungsi utama kalkulator dikendalikan oleh JavaScript. Berikut ialah fungsi calculateDiscount:

<code class="language-javascript">function calculateDiscount() {
    // ... (代码与原文相同) ...
}</code>

Segmentasi:

Pemilihan Elemen: Kami menggunakan document.getElementById() untuk mendapatkan semula nilai daripada input borang.
Pengesahan: Kami menyemak sama ada nilai input ialah nombor yang sah. Jika mana-mana nilai tidak sah, kami memaparkan makluman kepada pengguna.
Pengiraan: Jumlah harga dikira dengan mendarabkan harga asal dengan kuantiti. Kami kemudiannya menggunakan diskaun, mengira cukai dan menambah sebarang bayaran tambahan.
Memaparkan hasil: Keputusan dipaparkan dalam div dengan id discount-result. Kami menggunakan .innerHTML untuk mengemas kini kandungan secara dinamik dan .style.display = 'block' untuk memaparkan hasil.

Cadangan untuk penambahbaikan

Kod berfungsi dengan baik, tetapi sentiasa ada ruang untuk penambahbaikan. Berikut ialah beberapa cadangan:

Pengesahan nombor bukan negatif: Memastikan pengguna tidak boleh memasukkan nombor negatif untuk harga, kuantiti atau yuran.
Cukai Pilihan: Medan cukai dan surcaj boleh dijadikan pilihan dengan menetapkan nilai lalai atau menambahkan pengendalian input yang lebih kompleks.
Maklum Balas Pengguna: Untuk input yang tidak sah, pertimbangkan untuk memaparkan mesej pada halaman itu sendiri, yang akan menjadi kurang mengganggu.

Kongsi pendapat anda

Apakah penambahbaikan lain yang anda fikir boleh dibuat pada kod ini? Sila tinggalkan cadangan anda dalam komen di bawah dan mari kita sama-sama memperbaiki kalkulator ini!

[Uji Kod di sini](Uji Kod)

Atas ialah kandungan terperinci Pengiraan Diskaun Mudah: Cukai, Yuran & Peratusan Diskaun Diterangkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html5 css html auto innerHTML display margin border

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Daripada Cabaran kepada Penciptaan: Membina Penjana Catatan Blog dengan AWS dan ReactArtikel seterusnya：Daripada Cabaran kepada Penciptaan: Membina Penjana Catatan Blog dengan AWS dan React

Artikel berkaitan

Lihat lagi