jqueryを使った電卓の実装-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryを使った電卓の実装

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 14, 2023 am 09:38 AM

電卓は人々の日常生活に欠かせないツールの 1 つであり、Web 開発では実装が必要になることが多い機能の 1 つでもあります。この記事では、jQuery ライブラリを使用して、四則演算と小数演算をサポートし、キーボード入力が使用できる簡単な電卓を実装します。

まず、計算機をホストする HTML ページを作成する必要があります。 HTML 構造は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery计算器</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="calculator">
        <div class="display">
            <input type="text" id="result" readonly>
        </div>
        <div class="keys">
            <button id="clear">AC</button>
            <button id="sign">+/-</button>
            <button id="percent">%</button>
            <button class="operator" id="divide">/</button>
            <button class="number" id="seven">7</button>
            <button class="number" id="eight">8</button>
            <button class="number" id="nine">9</button>
            <button class="operator" id="multiply">*</button>
            <button class="number" id="four">4</button>
            <button class="number" id="five">5</button>
            <button class="number" id="six">6</button>
            <button class="operator" id="subtract">-</button>
            <button class="number" id="one">1</button>
            <button class="number" id="two">2</button>
            <button class="number" id="three">3</button>
            <button class="operator" id="add">+</button>
            <button class="number" id="zero">0</button>
            <button id="decimal">.</button>
            <button id="equal">=</button>
        </div>
    </div>
</body>
</html>

ログイン後にコピー

この HTML 構造には、電卓のコンテナーがあり、2 つのサブ要素があります。1 つは表示領域、もう 1 つはキー領域です。表示領域には入力ボックスを使用して演算結果が表示され、キー領域には数字や演算子などのキー、およびその他の特殊キー (クリア、否定、パーセンテージなど) が含まれます。

次に、電卓を美しくするために CSS スタイルシートを作成する必要があります。 CSS スタイルは次のとおりです。

body {
    font-family: Arial, sans-serif;
}

#calculator {
    margin: 0 auto;
    width: 310px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.display {
    padding: 10px;
    background-color: #f2f2f2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: right;
}

#result {
    width: 100%;
    height: 40px;
    font-size: 24px;
    border: 0;
}

.keys {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(4, 1fr);
    background-color: #efefef;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

button {
    width: 100%;
    height: 50px;
    font-size: 20px;
    border: 0;
    color: #fff;
    background-color: #4CAF50;
    cursor: pointer;
    outline: none;
}

button:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}

ログイン後にコピー

この CSS スタイルでは、境界線、影、丸い角などを含む、電卓の全体的なスタイルを設定します。キーボードのキーを密に配置するために、CSS グリッドレイアウト技術を使用し、キーのスタイルを設定しました。

次に、計算機のロジックを処理するための JavaScript スクリプトを作成する必要があります。 jQuery ライブラリを使用して、コードの作成と DOM 操作の処理を簡素化します。

最初に 3 つの変数をグローバルに定義する必要があります。

var firstNumber = '';
var operator = '';
var secondNumber = '';

ログイン後にコピー

これらの 3 つの変数には、ユーザーが入力した最初の数値、演算子、および 2 番目の数値がそれぞれ保存されます。

jQuery のイベント処理関数を使用して、主要なイベントをバインドします。たとえば、ユーザーが数字キーをクリックすると、表示領域の入力ボックスに対応する数字が追加されます。ユーザーがプラスキーとマイナスキーをクリックすると、対応する演算子が変数演算子に保存されます。ユーザーが等号キーをクリックすると、現在の演算子に基づいて対応する計算が実行され、結果が入力ボックスに表示されます。具体的な実装コードは次のとおりです。

$(document).ready(function() {
    $('.number').click(function() {
        var input = $('#result').val();
        var number = $(this).text();

        // 判断当前输入框中是否已经有小数点
        if (number === '.') {
            if (input.indexOf('.') !== -1) {
                return;
            }
            if (input === '') {
                input = '0';
            }
        }

        input += number;
        $('#result').val(input);
    });

    $('.operator').click(function() {
        firstNumber = $('#result').val();
        operator = $(this).text();
        $('#result').val('');
    });

    $('#equal').click(function() {
        secondNumber = $('#result').val();
        var result = 0;
        var num1 = parseFloat(firstNumber);
        var num2 = parseFloat(secondNumber);

        switch (operator) {
            case '+':
                result = num1 + num2;
                break;
            case '-':
                result = num1 - num2;
                break;
            case '*':
                result = num1 * num2;
                break;
            case '/':
                result = num1 / num2;
                break;
        }

        $('#result').val(result);
    });

    $('#clear').click(function() {
        firstNumber = '';
        operator = '';
        secondNumber = '';
        $('#result').val('');
    });

    $('#sign').click(function() {
        var input = $('#result').val();
        var prefix = '';

        if (input.charAt(0) === '-') {
            prefix = input.substr(1);
        } else {
            prefix = '-' + input;
        }

        $('#result').val(prefix);
    });

    $('#percent').click(function() {
        var input = $('#result').val();
        var percent = parseFloat(input) / 100;
        $('#result').val(percent);
    });

    $(document).keydown(function(event) {
        var key = event.key;

        if (!isNaN(key)) {
            $('#' + key).click();
        } else if (key === '+' || key === '-' || key === '*' || key === '/') {
            $('#' + key).click();
        } else if (key === 'Enter') {
            $('#equal').click();
        } else if (key === '.') {
            $('#decimal').click();
        } else if (event.ctrlKey && (key === 'c' || key === 'C')) {
            $('#clear').click();
        }
    });
});

ログイン後にコピー

この JavaScript スクリプトでは、jQuery のイベント処理関数 click を使用して主要なイベントをバインドします。ユーザーが数値キーをクリックすると、現在の入力ボックスの値から入力された数値が読み取られます。キーが小数点の場合は、現在の入力ボックスに既に小数点があるかどうかを確認する必要があります。、キーを無視します。ユーザーがプラス記号またはマイナス記号をクリックすると、現在の入力ボックスの数値が変数 firstNumber に保存され、演算子が変数演算子に保存され、現在の入力ボックスがクリアされます。ユーザーが等号をクリックすると、入力ボックスの値が 2 番目の数値として読み取られ、現在の演算子に基づいて対応する計算が実行され、計算結果が入力ボックスに表示されます。ユーザーがクリアキー、反転キー、パーセントキーをクリックすると、それぞれ対応する操作が実行されます。ユーザーがキーボード上の対応するキーを押すと、対応するキーのクリックイベントがシミュレートされます。たとえば、ユーザーが数字キーを押すと、対応する数字キーのクリックイベントがトリガーされます。

最後に、HTML ページ、CSS スタイルシート、JavaScript スクリプトを組み合わせて、簡単な計算機を実装しました。ユーザーはマウスやキーボードの操作で四則演算を実行でき、小数演算やクリア、否定、パーセンテージなどの特殊な演算も実行できます。この記事での実装は基本的なプロトタイプにすぎません。サポートブラケットや科学計算など、より豊富な機能を実装する必要がある場合は、これをベースに拡張することもできます。

以上がjqueryを使った電卓の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7562

CakePHP チュートリアル

1384

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

UseEffectとは何ですか？副作用を実行するためにどのように使用しますか？ Mar 19, 2025 pm 03:58 PM

この記事では、functionコンポーネントでのデータフェッチやDOM操作などの副作用を管理するためのフックであるReactの使用Effectについて説明します。メモリリークなどの問題を防ぐための使用、一般的な副作用、およびクリーンアップについて説明します。

connect（）を使用して、ReactコンポーネントをReduxストアにどのように接続しますか？ Mar 21, 2025 pm 06:23 PM

記事では、Connect（）、MapStateToprops、MapDispatchToprops、およびパフォーマンスへの影響を説明するReduxストアに反応コンポーネントをReduxストアに接続します。

usecontextとは何ですか？コンポーネント間で状態を共有するためにどのように使用しますか？ Mar 19, 2025 pm 03:59 PM

この記事では、ReactのUseContextを説明しています。これにより、小道具掘削を避けることで国家管理を簡素化します。再レンダーの削減により、集中状態やパフォーマンスの改善などの利点について説明します。

イベントハンドラーのデフォルトの動作をどのように防止しますか？ Mar 19, 2025 pm 04:10 PM

記事では、PreventDefault（）メソッドを使用して、イベントハンドラーのデフォルト動作の防止、ユーザーエクスペリエンスの強化などの利点、およびアクセシビリティの懸念などの潜在的な問題について説明します。

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか？ Mar 19, 2025 pm 04:16 PM

この記事では、予測可能性、パフォーマンス、ユースケースなどの側面に焦点を当てた、Reactの制御されていないコンポーネントと制御されていないコンポーネントの利点と欠点について説明します。それらを選択する際に考慮することを要因についてアドバイスします。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。