溫馨提示×

JavaScript怎么實現(xiàn)網(wǎng)頁計算器

小億
121
2024-02-27 17:52:20
欄目: 編程語言

JavaScript可以實現(xiàn)網(wǎng)頁計算器的功能，以下是一個簡單的示例：

<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁計算器</title>
</head>
<body>
<h1>網(wǎng)頁計算器</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('輸入表達(dá)式無效，請重新輸入');
  }
}

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

在這個示例中，我們創(chuàng)建了一個簡單的網(wǎng)頁計算器，用戶可以在輸入框中輸入表達(dá)式，然后點擊“=”按鈕進(jìn)行計算。計算器支持基本的加減乘除運算，同時也可以清除輸入框中的內(nèi)容。通過JavaScript的eval函數(shù)來計算輸入表達(dá)式的結(jié)果。如果輸入的表達(dá)式無效，會彈出一個提示框提示用戶重新輸入。

0 踩