jQuery計算器是一種快速簡便的計算器，它可以幫助用戶進行各種簡單的數學計算，在網頁中使用。下面是一個簡單的jQuery計算器實現。
<!doctype HTML>
<html>
<head>
<title>jQuery計算器</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var num1, num2, operator, result;
// 獲取第一個數
$('input[name=number1]').blur(function() {
num1 = parseFloat($(this).val());
});
// 獲取第二個數
$('input[name=number2]').blur(function() {
num2 = parseFloat($(this).val());
});
// 獲取操作符
$('select[name=operator]').change(function() {
operator = $(this).val();
});
// 計算結果
$('button[name=calculate]').click(function() {
switch(operator) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
result = num1 / num2;
break;
}
$('input[name=result]').val(result);
});
});
</script>
</head>
<body>
<form>
<input type="number" name="number1" placeholder="輸入第一個數"/>
<select name="operator">
<option value="add">加法</option>
<option value="subtract">減法</option>
<option value="multiply">乘法</option>
<option value="divide">除法</option>
</select>
<input type="number" name="number2" placeholder="輸入第二個數"/>
<button type="button" name="calculate">計算</button>
<br/>
<input type="number" name="result" placeholder="結果"/>
</form>
</body>
</html>這段代碼實現了一個簡單的計算器，在頁面中通過輸入兩個數和選擇對應的操作符，點擊計算按鈕即可得到計算結果。
上一篇div css 文本間距
下一篇div css 項目