📅 最后修改于: 2023-12-03 14:49:42.274000 🧑 作者: Mango
介绍
计算器是一个非常简单但又非常实用的工具，在程序设计中使用计算器也经常会涉及到。在本文中，我们将介绍如何使用 jQuery 实现一个简单的计算器。
需求
设计一个具有基本算术操作（加、减、乘、除）的计算器，同时支持小数点和百分号的计算。
实现
首先在 HTML 页面中引入 jQuery 库，并创建一个计算器的 HTML 骨架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Calculator</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="calculator">
<div id="result"></div>
<div id="buttons">
<button class="operator" id="add">+</button>
<button class="operator" id="subtract">-</button>
<button class="operator" id="multiply">×</button>
<button class="operator" id="divide">÷</button>
<button class="number" id="decimal">.</button>
<button class="number" id="percent">%</button>
<button class="number" id="clear">C</button>
<button class="number" id="equals">=</button>
<button class="number" id="zero">0</button>
<button class="number" id="one">1</button>
<button class="number" id="two">2</button>
<button class="number" id="three">3</button>
<button class="number" id="four">4</button>
<button class="number" id="five">5</button>
<button class="number" id="six">6</button>
<button class="number" id="seven">7</button>
<button class="number" id="eight">8</button>
<button class="number" id="nine">9</button>
</div>
</div>
</body>
</html>
在 JavaScript 文件中，我们可以定义基本的算术函数 addition, subtraction, multiplication 和 division，并使用 jQuery 为每个按钮分配单击事件处理程序：
$(document).ready(function() {
var equation = '';
var lastPressed = '';
var result = 0;
function addition(x, y) {
return x + y;
}
function subtraction(x, y) {
return x - y;
}
function multiplication(x, y) {
return x * y;
}
function division(x, y) {
return x / y;
}
function evaluate() {
var arr = equation.split(' ');
var num1 = parseFloat(arr[0]);
var op = arr[1];
var num2 = parseFloat(arr[2]);
switch(op) {
case '+': result = addition(num1, num2); break;
case '-': result = subtraction(num1, num2); break;
case '×': result = multiplication(num1, num2); break;
case '÷': result = division(num1, num2); break;
}
$('#result').text(result);
equation = '';
}
$('.number').click(function() {
var value = $(this).attr('id');
if (value === 'decimal' && equation.indexOf('.') !== -1) {
return;
}
if (value === 'percent') {
var arr = equation.split(' ');
var num = parseFloat(arr[arr.length - 1]);
num /= 100;
if (arr.length === 1) {
equation = num.toString();
} else {
arr[arr.length - 1] = num.toString();
equation = arr.join(' ');
}
$('#result').text(num.toString());
return;
}
if (value === 'clear') {
equation = '';
lastPressed = '';
result = 0;
$('#result').text('0');
return;
}
if (value === 'zero' && equation === '') {
return;
}
if (value === 'zero' && equation[equation.length - 1] === '/') {
return;
}
if (value === 'equals') {
if (lastPressed === 'operator' || equation === '') {
return;
}
evaluate();
return;
}
if (value === 'decimal') {
if (lastPressed !== 'number') {
equation += '0';
}
}
if (value === 'percent') {
if (lastPressed === 'operator') {
return;
}
}
equation += value;
if (value === 'add' || value === 'subtract' || value === 'multiply' || value === 'divide') {
equation += ' ';
}
if (value === 'decimal') {
lastPressed = 'decimal';
} else if (value === 'percent') {
lastPressed = 'percent';
} else if (value === 'clear') {
lastPressed = 'clear';
} else if (value === 'equals') {
lastPressed = 'equals';
} else if (value === 'add' || value === 'subtract' || value === 'multiply' || value === 'divide') {
lastPressed = 'operator';
} else {
lastPressed = 'number';
}
$('#result').text(equation);
});
});
最终，我们得到一个可以输入算术表达式并计算结果的 jQuery 计算器。
总结
在本文中，我们介绍了如何使用 jQuery 实现一个简单的计算器。这个计算器可以处理基本的算术操作（加、减、乘、除），支持小数点和百分号的计算。学习和使用 jQuery 可以让你的代码更加简洁和可读，同时也可以提高你的开发效率。