jquery 计算器
jQuery 计算器实现
创建一个基于 jQuery 的计算器需要结合 HTML、CSS 和 jQuery 代码。以下是实现一个简单计算器的步骤：
HTML 结构
创建一个包含数字按钮、操作符按钮和显示区域的 HTML 结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" disabled>
<div class="buttons">
<button class="btn" value="7">7</button>
<button class="btn" value="8">8</button>
<button class="btn" value="9">9</button>
<button class="btn operator" value="/">/</button>
<button class="btn" value="4">4</button>
<button class="btn" value="5">5</button>
<button class="btn" value="6">6</button>
<button class="btn operator" value="*">*</button>
<button class="btn" value="1">1</button>
<button class="btn" value="2">2</button>
<button class="btn" value="3">3</button>
<button class="btn operator" value="-">-</button>
<button class="btn" value="0">0</button>
<button class="btn" value=".">.</button>
<button class="btn clear" value="C">C</button>
<button class="btn operator" value="+">+</button>
<button class="btn equal" value="=">=</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS 样式
为计算器添加基本样式，使其更美观。
.calculator {
width: 200px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background: #f9f9f9;
}
.display {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.btn {
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
background: #e0e0e0;
}
.btn:hover {
background: #d0d0d0;
}
.operator {
background: #ff9800;
color: white;
}
.equal {
background: #4caf50;
color: white;
grid-column: span 4;
}
.clear {
background: #f44336;
color: white;
}jQuery 逻辑
使用 jQuery 实现计算器的功能逻辑。
$(document).ready(function() {
let currentInput = '';
let previousInput = '';
let operation = null;
let resetScreen = false;
$('.btn').click(function() {
const value = $(this).val();
if ($(this).hasClass('clear')) {
currentInput = '';
previousInput = '';
operation = null;
$('.display').val('0');
return;
}
if ($(this).hasClass('equal')) {
if (operation && previousInput && currentInput) {
currentInput = calculate(previousInput, currentInput, operation);
$('.display').val(currentInput);
operation = null;
resetScreen = true;
}
return;
}
if ($(this).hasClass('operator')) {
if (currentInput === '') return;
if (previousInput !== '') {
currentInput = calculate(previousInput, currentInput, operation);
}
operation = value;
previousInput = currentInput;
resetScreen = true;
$('.display').val(currentInput);
return;
}
if (resetScreen) {
currentInput = '';
resetScreen = false;
}
if (value === '.' && currentInput.includes('.')) return;
currentInput += value;
$('.display').val(currentInput);
});
function calculate(a, b, op) {
a = parseFloat(a);
b = parseFloat(b);
switch (op) {
case '+': return a + b;
case '-': return a - b;
case '*': return a * b;
case '/': return a / b;
default: return b;
}
}
});功能说明
- 数字按钮和操作符按钮将值显示在屏幕上。
C按钮清除所有输入和操作。=按钮执行计算并显示结果。- 操作符按钮 (
+,-,*,/) 存储当前操作并准备计算。
注意事项
- 确保在 HTML 中正确引入 jQuery 库。
- 可以根据需要扩展功能，如添加更多操作符或科学计算功能。
- 代码中的错误处理可以进一步完善，例如除以零的情况。
