[JavaScript] win10 システムに付属の電卓をベースに設計されたシンプルなページ版の電卓です。必要な友達はそれを自分のコードに縫い込むことができます (ソースコードは添付されています)

<!DOCTYPE html>
<html>
<head>
    <title>简易计算器</title>
    <style>
        .container {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            text-align: center;
            background-color: whitesmoke;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .button {
            margin-top: 10px;
            width: 22%;
            padding: 10px;
        }
        #display {
            width: 90%;
            height: 50px;
            font-size: 30px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>计算器</h2>
        <input type="text" id="display" readonly>
        <!-- <div class="result" id="result">0</div> -->
        <button class="button" onclick="appendValue('7')">7</button>
        <button class="button" onclick="appendValue('8')">8</button>
        <button class="button" onclick="appendValue('9')">9</button>
        <button class="button" onclick="appendOperator('/')">/</button>
        <button class="button" onclick="appendValue('4')">4</button>
        <button class="button" onclick="appendValue('5')">5</button>
        <button class="button" onclick="appendValue('6')">6</button>
        <button class="button" onclick="appendOperator('*')">*</button>
        <button class="button" onclick="appendValue('1')">1</button>
        <button class="button" onclick="appendValue('2')">2</button>
        <button class="button" onclick="appendValue('3')">3</button>
        <button class="button" onclick="appendOperator('-')">-</button>
        <button class="button" onclick="appendValue('0')" style="width: 46%;">0</button>
        <button class="button" onclick="appendValue('.')">.</button>
        <button class="button" onclick="appendOperator('+')">+</button>
        <button class="button" onclick="clearDisplay()" style="width: 46%;">C</button>
        <button class="button" onclick="calculate()" style="width: 46%;">=</button>
    </div>

    <script>
        let displayValue = '0';
        let operator = '';
        let operand = 0;

        function updateDisplay() {
            document.getElementById('display').value = displayValue;
        }

        function clearDisplay() {
            displayValue = '0';
            operator = '';
            operand = 0;
            updateDisplay();
        }

        function appendValue(value) {
            if (displayValue === '0') {
                displayValue = '';
            }
            displayValue += value;
            updateDisplay();
        }

        function appendOperator(op) {
            operator = op;
            operand = parseFloat(displayValue);
            displayValue = '0';
            updateDisplay();
        }

        function calculate() {
            const currentValue = parseFloat(displayValue);
            let result = 0;
            switch (operator) {
                case '+':
                    result = operand + currentValue;
                    break;
                case '-':
                    result = operand - currentValue;
                    break;
                case '*':
                    result = operand * currentValue;
                    break;
                case '/':
                    result = operand / currentValue;
                    break;
            }
            displayValue = result.toString();
            operator = '';
            operand = 0;
            updateDisplay();
        }
    </script>
</body>
</html>

このコードは、JavaScript と HTML を使用して基本的なユーザーインターフェイスを構築する単純な計算機を実装します。電卓インターフェイスは、ユーザーが入力した数値と計算結果を表示する表示領域と、数値、演算子を入力し、計算を実行するための一連のボタンで構成されます。

一部の変数は、ユーザー入力と計算ステータスを追跡するためにコード内で定義されています。このうち、`displayValue`変数はユーザーが現在入力している数値や計算結果を保存するために使用され、`operator`変数は現在選択されている演算子を保存するために使用され、`operand`変数は以前に入力された数値や計算結果を保存するために使用されます。番号。

関数 `updateDisplay()` は、表示領域を更新し、テキスト入力ボックスに `displayValue` の値を表示するために使用されます。

関数 `clearDisplay()` は、表示領域をクリアし、電卓の状態をリセットするために使用されます。ユーザーが「C」ボタンをクリックすると、この関数は `displayValue`、`operator`、および `operand` の値を初期状態にリセットします。

関数 `appendValue(value)` は、ユーザーがクリックした数値または小数点を `displayValue` に追加し、表示領域を更新するために使用されます。

関数 `appendOperator(op)` は、ユーザーがクリックした演算子を `operator` 変数に格納し、`displayValue` の値を初期状態にリセットするために使用されます。

関数 `calculate()` は計算操作を実行するために使用されます。現在の演算子に基づいて `operand` と `currentValue` に対して対応する操作を実行し、結果を `displayValue` に格納し、表示領域を更新します。

最後に、ユーザーは HTML でボタンを定義し、対応するイベントハンドラーを使用してこれらの関数を呼び出すことによって、計算機と対話します。ユーザーはボタンをクリックして数値や演算子を入力し、計算操作を実行すると、計算結果が表示領域にリアルタイムで表示されます。

[JavaScript] win10 システムに付属の電卓をベースに設計されたシンプルなページ版の電卓です。必要な友達はそれを自分のコードに縫い込むことができます (ソース コードは添付されています)

おすすめ

[JavaScript] win10 システムに付属の電卓をベースに設計されたシンプルなページ版の電卓です。必要な友達はそれを自分のコードに縫い込むことができます (ソースコードは添付されています)