JS使用JQ框架来写四则计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。
时间: 2024-09-27 08:11:19 浏览: 67
基于js实现的限制文本框只可以输入数字
使用jQuery(JQ)构建一个基本的四则计算器,你可以按照以下步骤来实现:
1. 首先,在HTML中添加三个输入框和一个按钮,以及一个用于显示结果的区域:
```html
<input type="number" id="num1">
<input type="number" id="num2">
<button id="calculate">+</button>
<input type="number" id="result" style="display:none;">
```
2. 使用jQuery监听按钮点击事件,获取两个输入框的值,然后根据按钮的内容(这里是"+")进行相应的计算:
```javascript
$(document).ready(function() {
$('#calculate').on('click', function() {
var num1 = parseInt($("#num1").val());
var num2 = parseInt($("#num2").val());
if ($(this).text() == "+") {
var sum = num1 + num2;
$("#result").val(sum).show();
} else if ($(this).text() == "- num2;
$("#result").val(difference).show();
// 添加其他运算符的逻辑...
}
});
});
```
这里我们只实现了加法和减法的计算,其他如乘法(`*`)、除法(`/`)可以类似处理,并根据`$(this).text()`的值判断运算符。
3. 最后,记得隐藏初始的两个输入框并只显示结果输入框:
```javascript
$("#num1, #num2").hide();
```
阅读全文