ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptを使って四則演算を実装する方法

JavaScriptを使って四則演算を実装する方法

PHPz
リリース: 2023-04-06 11:03:55
オリジナル
2126 人が閲覧しました

Web 開発では、JavaScript は非常に人気のあるプログラミング言語です。JavaScript を使用すると、単純な四則演算を実装するなど、多くの興味深い機能を実現できます。この記事では、JavaScriptを使用して四則演算を実装する方法を紹介します。

1. HTML 構造

まず、HTML ファイルを作成し、式を入力するためのテキスト ボックス、4 つの演算子用のボタン、および結果が表示される領域のボタンを追加する必要があります。 HTML コードは次のとおりです。

nbsp;html>


    <meta>
    <title>用JavaScript实现四则运算</title>


    <input>
    <button>+</button>
    <button>-</button>
    <button>*</button>
    <button>/</button>
    <p></p>
    <script></script>

ログイン後にコピー

この HTML 構造では、input 要素を入力式のテキスト ボックスとして使用し、button 要素を 4 つの演算子のボタンとして使用し、これらに計算関数を追加します。ボタン転送。また、結果を表示する領域も追加していますので、p要素のid属性はresultなので、このidを使って結果を表示する領域を取得します。

2. JavaScript コード

次に、四則演算を実装するための JavaScript ファイルを作成する必要があります。 JavaScript コードは次のとおりです。

function calculate(operator) {
    var expression = document.getElementById("expression").value; //获取表达式
    var operArr = expression.split(operator); //分割表达式
    var numArr = []; //存储数字
    for(var i = 0; i <p> この JavaScript コードでは、入力式に対して四則演算を実行する計算関数を定義します。この関数では、最初に document.getElementById("expression").value を通じてユーザーが入力した式を取得し、次に、split メソッドを通じて式を 2 つの数値に分割し、その 2 つの数値を配列に格納します。次に、switch ステートメントによって 4 つの演算子が別々に処理され、最終的に document.getElementById("result").innerHTML によって結果がページに表示されます。 </p><p>3. </p><p> を使用してコードを記述した後、ブラウザで HTML ファイルを開き、式を入力し、演算子を選択して、等号をクリックして演算を取得するだけです。結果はページに表示されます。以下に示すように: </p><p><img src="https://img.php.cn/upload/article/000/000/068/168075020156607.png" alt="JavaScriptを使って四則演算を実装する方法" title="JavaScriptを使って四則演算を実装する方法"></p><p>4. 概要</p><p>この記事の導入部を通じて、単純な四則演算を実装するのが非常に簡単であることがわかります。 JavaScript。いくつかの基本的な JavaScript 構文と HTML 構造だけを使用して、四則演算を簡単に実装できます。この記事が、JavaScript を学習および使用する際の皆様のお役に立てれば幸いです。 </p>
ログイン後にコピー

以上がJavaScriptを使って四則演算を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート