ホームページ >ウェブフロントエンド >jsチュートリアル >簡単な割引計算: 税金、手数料、割引率の説明
簡単な割引計算: 税金、手数料、割引率の説明
- Mary-Kate Olsenオリジナル
- 2025-01-16 13:12:58975ブラウズ
HTML、CSS、JavaScript で構築された割引計算ツール
この記事では、HTML、CSS、JavaScript を使用して構築された割引計算ツールについて説明します。コードを部分ごとに分解し、各部分がどのように機能するかを説明します。さらに、電卓を自分でテストする方法についても説明し、コードを改善するための提案もいくつか提供されます。
[ここでコードをテスト](コードをテスト)
電卓機能
この計算ツールは、ユーザーが割引、税金、追加料金を適用した後の商品の最終価格を計算できるように設計されています。元の価格、数量、割引率、税率、追加料金の入力を受け入れます。次に、これらの入力に基づいて総コストを計算します。
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 タグ :
<!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)、下部に余白があり、フォント サイズは 24 ピクセルです。
<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: このセクションでは、すべてのフォーム入力とボタンが配置されるコンテナーのスタイルを設定します。最大幅は 500 ピクセルで、margin: 0 auto;を使用して水平方向に中央揃えされ、緑色の境界線が付いています。box-shadowコンテナの周囲に微妙な影を作成して奥行きを与えます。
JavaScript 関数
電卓の主な機能は JavaScript によって処理されます。以下は calculateDiscount 関数です:
<code class="language-javascript">function calculateDiscount() {
// ... (代码与原文相同) ...
}</code>
セグメンテーション:
-
要素の選択:
document.getElementById()を使用してフォーム入力から値を取得します。 - 検証: 入力値が有効な数値であるかどうかを確認します。値が無効な場合は、ユーザーに警告が表示されます。
- 計算: 合計価格は、元の価格に数量を乗算して計算されます。次に、割引を適用し、税金を計算し、追加料金を追加します。
-
結果の表示: 結果は ID
discount-resultの div に表示されます。.innerHTMLを使用してコンテンツを動的に更新し、.style.display = 'block'を使用して結果を表示します。
改善のための提案
コードはうまく機能しますが、常に改善の余地があります。ここにいくつかの提案があります:
- 負でない数値の検証: ユーザーが価格、数量、または料金に負の数値を入力できないようにします。
- オプションの税金: 税金とサーチャージのフィールドは、デフォルト値を設定するか、より複雑な入力処理を追加することでオプションにすることができます。
- ユーザー フィードバック: 無効な入力については、ページ自体にメッセージを表示することを検討してください。これにより、煩わしさが軽減されます。
あなたの考えを共有してください
このコードに他にどのような改善ができると思いますか?以下のコメント欄に提案を残して、この計算機を一緒に改善しましょう。
[ここでコードをテスト](コードをテスト)
以上が簡単な割引計算: 税金、手数料、割引率の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。