簡単な割引計算: 税金、手数料、割引率の説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

簡単な割引計算: 税金、手数料、割引率の説明

Mary-Kate Olsen

Jan 16, 2025 pm 01:12 PM

Easy Discount Calculation: Tax, Fees & Discount Percentage Explained

HTML、CSS、JavaScript で構築された割引計算ツール

この記事では、HTML、CSS、JavaScript を使用して構築された割引計算ツールについて説明します。コードを部分ごとに分解し、各部分がどのように機能するかを説明します。さらに、電卓を自分でテストする方法についても説明し、コードを改善するための提案もいくつか提供されます。

[ここでコードをテスト](コードをテスト)

電卓機能

この計算ツールは、ユーザーが割引、税金、追加料金を適用した後の商品の最終価格を計算できるように設計されています。元の価格、数量、割引率、税率、追加料金の入力を受け入れます。次に、これらの入力に基づいて総コストを計算します。

HTML 構造

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>

ログイン後にコピー

手順:

DOCTYPE タグと HTML タグ : <!DOCTYPE html> 宣言はドキュメントタイプ (この場合は HTML5) を定義します。 <html> タグには、すべての HTML コンテンツが含まれます。
ヘッドセクション: <head> タグ内には、レスポンシブデザインの文字セットとビューポートを設定するためのメタタグがあります。 <title> タグは、ブラウザーのタブに表示されるページのタイトルを定義します。
本文セクション: ページの本文には、ユーザーが操作する実際のコンテンツが含まれます。ここでは、<h1> タグをメインタイトルとして使用し、<div> をフォーム要素を含むコンテナーとして使用します。

CSS スタイル

ここで、電卓のスタイルを設定するための CSS について説明します。

body.discount-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f3f4f6;
    color: #333;
    box-sizing: border-box;
}

ログイン後にコピー

セグメンテーション:

body.discount-body: フォントファミリーを Arial に設定し、コンテンツの周囲にパディングを追加し、明るい背景色を設定するなど、一般的なスタイルを本文に適用します。 box-sizing: border-box;要素の全体の幅と高さにパディングとボーダーが含まれていることを確認してください。

h1.discount-heading {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 24px;
}

ログイン後にコピー

h1.discount-heading: タイトルは中央揃え、色は緑 (#28a745)、下部に余白があり、フォントサイズは 24 ピクセルです。

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

ログイン後にコピー

.container.discount-container: このセクションでは、すべてのフォーム入力とボタンが配置されるコンテナーのスタイルを設定します。最大幅は 500 ピクセルで、margin: 0 auto; を使用して水平方向に中央揃えされ、緑色の境界線が付いています。 box-shadowコンテナの周囲に微妙な影を作成して奥行きを与えます。

JavaScript 関数

電卓の主な機能は JavaScript によって処理されます。以下は calculateDiscount 関数です:

function calculateDiscount() {
    // ... (代码与原文相同) ...
}

ログイン後にコピー

セグメンテーション:

要素の選択: document.getElementById() を使用してフォーム入力から値を取得します。
検証: 入力値が有効な数値であるかどうかを確認します。値が無効な場合は、ユーザーに警告が表示されます。
計算: 合計価格は、元の価格に数量を乗算して計算されます。次に、割引を適用し、税金を計算し、追加料金を追加します。
結果の表示: 結果は ID discount-result の div に表示されます。 .innerHTML を使用してコンテンツを動的に更新し、.style.display = 'block' を使用して結果を表示します。

改善のための提案

コードはうまく機能しますが、常に改善の余地があります。ここにいくつかの提案があります:

負でない数値の検証: ユーザーが価格、数量、または料金に負の数値を入力できないようにします。
オプションの税金: 税金とサーチャージのフィールドは、デフォルト値を設定するか、より複雑な入力処理を追加することでオプションにすることができます。
ユーザーフィードバック: 無効な入力については、ページ自体にメッセージを表示することを検討してください。これにより、煩わしさが軽減されます。

あなたの考えを共有してください

このコードに他にどのような改善ができると思いますか?以下のコメント欄に提案を残して、この計算機を一緒に改善しましょう。

[ここでコードをテスト](コードをテスト)

以上が簡単な割引計算: 税金、手数料、割引率の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1672

CakePHP チュートリアル

1428

Laravel チュートリアル

1332

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーション Apr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles

簡単な割引計算: 税金、手数料、割引率の説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック