JavaScriptは単純な四則演算を実装します-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptは単純な四則演算を実装します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 18, 2023 am 10:14 AM

JavaScript は、フロントエンド開発で広く使用されているプログラミング言語であり、スクリプト言語としても知られています。単純な四則演算を含む多くの機能を実装できます。この記事ではJavaScriptを使って簡単な四則演算を実装する方法を紹介します。

数値入力

四則演算を行うには、まず数値を入力する必要があります。 HTML の input タグを使用して数値を入力できます。例:

<input type="number" id="num1" placeholder="请输入第一个数字">
<input type="number" id="num2" placeholder="请输入第二个数字">

これにより、ページに 2 つの数字を入力できるようになります。

演算子の選択

四則演算には加算、減算、乗算、除算が含まれます。ユーザーが選択できるようにページ上に選択ボックスを設ける必要があります。実行するオペレーター。これは、HTML の select タグを使用して実現できます。

<select id="operator">
  <option value="+">加</option>
  <option value="-">减</option>
  <option value="*">乘</option>
  <option value="/">除</option>
</select>

これにより、ページ上の 4 つの演算子から 1 つを選択できます。

演算の実装

JavaScript では、基本的な数学関数を使用して四則演算を実装できます。加算には演算子が使用され、減算には - 演算子が使用され、乗算には * 演算子が使用され、除算には / 演算子が使用されます。したがって、コードは次のように記述できます。

function calculate() {
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var operator = document.getElementById('operator').value;
  var result;

  switch (operator) {
    case '+':
      result = parseFloat(num1) + parseFloat(num2);
      break;
    case '-':
      result = parseFloat(num1) - parseFloat(num2);
      break;
    case '*':
      result = parseFloat(num1) * parseFloat(num2);
      break;
    case '/':
      result = parseFloat(num1) / parseFloat(num2);
      break;
    default:
      result = '请选择操作符';
  }

  document.getElementById('result').value = result;
}

このコードは、まずページ上の数値と演算子を取得し、次に switch ステートメントを使用して特定の操作を実行します。最後に結果がページに表示されます。

サンプル完全なコード

<!DOCTYPE html>
<html>

<head>
  <title>Javascript四则运算示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1 id="Javascript四则运算示例">Javascript四则运算示例</h1>
  <p>输入两个数字，选择一个操作符，点击计算按钮进行运算</p>
  <input type="number" id="num1" placeholder="请输入第一个数字">
  <input type="number" id="num2" placeholder="请输入第二个数字">
  <select id="operator">
    <option value="+">加</option>
    <option value="-">减</option>
    <option value="*">乘</option>
    <option value="/">除</option>
  </select>
  <button onclick="calculate()">计算</button>
  <input type="text" id="result" readonly>

  <script>
    function calculate() {
      var num1 = document.getElementById('num1').value;
      var num2 = document.getElementById('num2').value;
      var operator = document.getElementById('operator').value;
      var result;

      switch (operator) {
        case '+':
          result = parseFloat(num1) + parseFloat(num2);
          break;
        case '-':
          result = parseFloat(num1) - parseFloat(num2);
          break;
        case '*':
          result = parseFloat(num1) * parseFloat(num2);
          break;
        case '/':
          result = parseFloat(num1) / parseFloat(num2);
          break;
        default:
          result = '请选择操作符';
      }

      document.getElementById('result').value = result;
    }
  </script>

</body>

</html>

概要

上記のサンプルコードを通して、JavaScript が非常に便利であることがわかります。簡単な四則演算関数を実装します。実際の開発では、この実装方法をページに適用して、ユーザーが簡単な計算を実行できるようにすることができます。

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

声明

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

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

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

怠zyなロードの概念を説明してください。Mar 13, 2025 pm 07:47 PM

怠zyな読み込みは、必要になるまでコンテンツの読み込みを遅延させ、初期負荷時間とサーバーの負荷を削減することにより、Webパフォーマンスとユーザーエクスペリエンスを改善します。

JavaScriptの高次関数とは何ですか？また、より簡潔で再利用可能なコードを書くためにどのように使用できますか？Mar 18, 2025 pm 01:44 PM

JavaScriptの高次関数は、抽象化、共通パターン、および最適化技術を通じて、コードの簡潔さ、再利用性、モジュール性、およびパフォーマンスを強化します。

JavaScriptでカリーはどのように機能し、その利点は何ですか？Mar 18, 2025 pm 01:45 PM

この記事では、JavaScriptのカレーについて説明します。これは、マルチアーグメント関数を単一argument関数シーケンスに変換する手法です。 Curryingの実装、部分的なアプリケーションなどの利点、実用的な用途、コード読み取りの強化を調査します

React和解アルゴリズムはどのように機能しますか？Mar 18, 2025 pm 01:58 PM

この記事では、Virtual DOMツリーを比較してDOMを効率的に更新するReactの調整アルゴリズムについて説明します。パフォーマンスの利点、最適化技術、ユーザーエクスペリエンスへの影響について説明します。

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の制御されていないコンポーネントと制御されていないコンポーネントの利点と欠点について説明します。それらを選択する際に考慮することを要因についてアドバイスします。

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。