ホームページ > 記事 > ウェブフロントエンド > JavaScriptは単純な四則演算を実装します
JavaScriptは単純な四則演算を実装します
- WBOYオリジナル
- 2023-05-18 10:14:071514ブラウズ
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>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 サイトの他の関連記事を参照してください。