jquery计算器
时间: 2023-08-01 12:07:02 浏览: 56
好的,我可以为您提供一个简单的 jQuery 计算器示例代码,您可以在此基础上进行修改和扩展:
HTML 代码:
```html
<div id="calculator">
<input type="text" id="result" readonly>
<table>
<tr>
<td><button class="number">7</button></td>
<td><button class="number">8</button></td>
<td><button class="number">9</button></td>
<td><button class="operator">/</button></td>
</tr>
<tr>
<td><button class="number">4</button></td>
<td><button class="number">5</button></td>
<td><button class="number">6</button></td>
<td><button class="operator">*</button></td>
</tr>
<tr>
<td><button class="number">1</button></td>
<td><button class="number">2</button></td>
<td><button class="number">3</button></td>
<td><button class="operator">-</button></td>
</tr>
<tr>
<td><button class="clear">C</button></td>
<td><button class="number">0</button></td>
<td><button class="equal">=</button></td>
<td><button class="operator">+</button></td>
</tr>
</table>
</div>
```
CSS 代码:
```css
#calculator {
max-width: 300px;
margin: 0 auto;
text-align: center;
}
#result {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
}
table {
width: 100%;
margin-top: 10px;
}
button {
width: 100%;
height: 50px;
font-size: 24px;
background-color: #eee;
border: none;
outline: none;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}
```
jQuery 代码:
```javascript
$(document).ready(function() {
var result = $("#result");
var current = "";
var operator = "";
$(".number").click(function() {
current += $(this).text();
result.val(current);
});
$(".operator").click(function() {
operator = $(this).text();
current = "";
});
$(".equal").click(function() {
var num1 = parseInt(result.val());
var num2 = parseInt(current);
if (operator === "+") {
result.val(num1 + num2);
} else if (operator === "-") {
result.val(num1 - num2);
} else if (operator === "*") {
result.val(num1 * num2);
} else if (operator === "/") {
result.val(num1 / num2);
}
current = "";
operator = "";
});
$(".clear").click(function() {
current = "";
operator = "";
result.val("");
});
});
```
该计算器可以进行加、减、乘、除的四则运算,支持清空功能,使用了 jQuery 作为前端框架。您可以根据需要进行修改和优化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)