JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?

王林

リリース： 2023-10-27 14:51:42

オリジナル

1198 人が閲覧しました

如何使用 JavaScript 实现一个简单的计算器功能？

JavaScript を使用して簡単な電卓関数を実装するにはどうすればよいですか?

電卓は日常生活でよく使用されるツールの 1 つで、簡単な数学演算を実行するために使用できます。今回はJavaScriptを使って簡単な計算機能を実装してみます。この記事では、JavaScript を使用して基本的な数学演算と電卓インターフェイスを実装するコードを作成する方法を説明します。

まず、操作の結果を表示するためのテキストボックス、数字ボタン、および演算子ボタンを含む HTML ファイルを作成する必要があります。基本的な HTML 構造は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        /* 样式可以根据个人喜好进行自定义 */
    </style>
</head>
<body>
    <input type="text" id="result" readonly>
    <br>
    <button onclick="buttonClick('1')">1</button>
    <button onclick="buttonClick('2')">2</button>
    <button onclick="buttonClick('3')">3</button>
    <button onclick="buttonClick('+')">+</button>
    <br>
    <button onclick="buttonClick('4')">4</button>
    <button onclick="buttonClick('5')">5</button>
    <button onclick="buttonClick('6')">6</button>
    <button onclick="buttonClick('-')">-</button>
    <br>
    <button onclick="buttonClick('7')">7</button>
    <button onclick="buttonClick('8')">8</button>
    <button onclick="buttonClick('9')">9</button>
    <button onclick="buttonClick('*')">*</button>
    <br>
    <button onclick="buttonClick('0')">0</button>
    <button onclick="buttonClick('.')">.</button>
    <button onclick="buttonClick('=')">=</button>
    <button onclick="buttonClick('/')">/</button>
    <br>
    <button onclick="clearResult()">清空</button>
</body>
</html>

ログイン後にコピー

上記の HTML コードでは、テキストボックス (ID は「result」) を使用して操作の結果を表示し、数字ボタン、演算子ボタン、およびクリアを追加します。ボタン。各ボタンには onclick イベントがあり、ボタンのクリックイベントを処理するために buttonClick という名前の JavaScript 関数を呼び出します。

次に、JavaScript ファイルに buttonClick 関数と clearResult 関数の実装を記述する必要があります。以下はサンプルコードです。

function buttonClick(value) {
    var result = document.getElementById("result");

    if (value === '=') {
        result.value = eval(result.value); // 使用 eval 函数计算表达式
    } else {
        result.value += value;
    }
}

function clearResult() {
    document.getElementById("result").value = "";
}

ログイン後にコピー

buttonClick 関数では、最初に getElementById メソッドを通じてテキストボックスへの参照を取得し、次に別の処理を実行します。ボタンの値に基づきます。ボタンの値が等号 (=) の場合、eval 関数を使用して式を評価し、結果をテキストボックスに表示します。それ以外の場合は、ボタンの値をテキストボックスのコンテンツに追加します。

clearResult この関数はテキストボックスの値を空の文字列に設定するだけで、クリア関数を実現します。

これで、上記の HTML コードと JavaScript コードを対応するファイルに保存し、ブラウザで HTML ファイルを開くことができます。基本的な数学演算を実行できる単純な計算インターフェイスが表示されます。

これは単なる単純な電卓の例であり、基本的な四則演算機能のみを実装しています。括弧や三角関数のサポートなど、より複雑な計算機能を実装したい場合は、コードをさらに改善する必要があります。ただし、この例では、JavaScript を使用して単純な電卓関数を実装する方法を確認できます。

この記事があなたのお役に立てれば幸いです。また、プログラミングが楽しくなることを願っています。

以上がJavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。