HTML、CSS和JavaScript打造的折扣計算器
本文將逐步說明一個使用HTML、CSS和JavaScript建構的折扣計算器。我們將逐段分解程式碼，解釋每個部分的工作原理。此外，還將提供如何自行測試此計算器的說明，並提出一些程式碼改進建議。
[此處測試程式碼](Test the Code)
計算器功能
此計算器旨在幫助用戶計算應用折扣、稅金和任何額外費用後的商品最終價格。它接受原始價格、數量、折扣百分比、稅率百分比和額外費用的輸入。然後，它根據這些輸入計算總成本。
HTML結構
以下是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>說明：
<!DOCTYPE html>聲明定義了文件類型，在本例中為HTML5。 <html>標籤包含所有HTML內容。 <head>標籤內，我們有元標記用於設定字元集和視口以實現響應式設計。 <title>標籤定義了瀏覽器標籤中顯示的頁面標題。 <h1>標籤作為主標題，並使用<div>作為包含表單元素的容器。 CSS樣式
現在，讓我們討論一下為計算器設定樣式的CSS：
<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>細分：
body.discount-body: 我們為主體套用通用樣式，例如將字體系列設定為Arial，在內容周圍添加填充，並設定淺色背景顏色。 box-sizing: border-box;確保填充和邊框包含在元素的總寬度和高度。 <code class="language-css">h1.discount-heading {
text-align: center;
color: #28a745;
margin-bottom: 15px;
font-size: 24px;
}</code>h1.discount-heading: 標題居中，顏色為綠色（#28a745），底部有邊距，字體大小為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: 此部分設定所有表單輸入和按鈕所在的容器的樣式。它的最大寬度為500px，使用margin: 0 auto;水平居中，並帶有綠色邊框。 box-shadow在容器周圍創造微妙的陰影，使其具有深度。 JavaScript功能
計算器的主要功能由JavaScript處理。以下是calculateDiscount函數：
<code class="language-javascript">function calculateDiscount() {
// ... (代码与原文相同) ...
}</code>細分：
document.getElementById()從表單輸入擷取值。 discount-result的div中。我們使用.innerHTML動態更新內容，並使用.style.display = 'block'顯示結果。 改進建議
程式碼運作良好，但總是有改進的空間。以下是一些建議：
分享您的想法
您認為還可以對這段程式碼進行哪些改進？請在下面的評論中留下您的建議，讓我們一起改進這個計算器！
[此處測試程式碼](Test the Code)
以上是輕鬆計算折扣：稅金、費用和折扣百分比說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
