JavaScript電卓の作り方：Webサイト実装ガイド

1年 ago
結衣, 春花
2 minutes

JavaScriptを使用すると、ウェブサイトの電卓機能を実現することができます。以下は簡単な例です：

<!DOCTYPE html>
<html>
<head>
<title>网页计算器</title>
</head>
<body>
<h1>网页计算器</h1>

<input type="text" id="input" readonly>
<br>
<button onclick="clearInput()">C</button>
<button onclick="appendInput('+')">+</button>
<button onclick="appendInput('-">-</button>
<button onclick="appendInput('*">*</button>
<button onclick="appendInput('/')">/</button>
<br>
<button onclick="appendInput('7')">7</button>
<button onclick="appendInput('8')">8</button>
<button onclick="appendInput('9')">9</button>
<button onclick="calculate()">=</button>
<br>
<button onclick="appendInput('4')">4</button>
<button onclick="appendInput('5')">5</button>
<button onclick="appendInput('6')">6</button>
<button onclick="appendInput('('">(</button>
<button onclick="appendInput(')')">)</button>
<br>
<button onclick="appendInput('1')">1</button>
<button onclick="appendInput('2')">2</button>
<button onclick="appendInput('3')">3</button>
<button onclick="appendInput('.')">.</button>
<br>
<button onclick="appendInput('0')">0</button>

<script>
function appendInput(value) {
  document.getElementById('input').value += value;
}

function calculate() {
  let expression = document.getElementById('input').value;
  try {
    let result = eval(expression);
    document.getElementById('input').value = result;
  } catch (error) {
    alert('输入表达式无效，请重新输入');
  }
}

function clearInput() {
  document.getElementById('input').value = '';
}
</script>
</body>
</html>

この例では、シンプルなウェブ電卓を作成しました。ユーザーは式を入力するためのボックスに入力し、それから「＝」ボタンをクリックして計算を行うことができます。この電卓は基本的な加算、減算、乗算、除算をサポートしており、入力ボックスの内容をクリアすることもできます。入力した式の結果を計算するためにJavaScriptのeval関数を使用しています。もし入力された式が無効であれば、再入力を促すアラートが表示されます。

bannerAds