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函數來計算輸入表達式的結果。如果輸入的表達式無效,會彈出一個提示框提示用戶重新輸入。