所属分类：web前端开发
计算器是人们日常生活中不可或缺的工具之一，也是Web开发中经常需要实现的功能之一。在本文中，我们将通过利用jQuery库来实现一个简单的计算器，该计算器支持四则运算以及小数运算，并且可以使用键盘输入。
首先，我们需要创建一个HTML页面来承载我们的计算器。HTML结构如下：
微博登录
QQ登录<!DOCTYPE html>
<html>
<head>
<title>jQuery计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="calculator">
<div class="display">
<input type="text" id="result" readonly>
</div>
<div class="keys">
<button id="clear">AC</button>
<button id="sign">+/-</button>
<button id="percent">%</button>
<button class="operator" id="divide">/</button>
<button class="number" id="seven">7</button>
<button class="number" id="eight">8</button>
<button class="number" id="nine">9</button>
<button class="operator" id="multiply">*</button>
<button class="number" id="four">4</button>
<button class="number" id="five">5</button>
<button class="number" id="six">6</button>
<button class="operator" id="subtract">-</button>
<button class="number" id="one">1</button>
<button class="number" id="two">2</button>
<button class="number" id="three">3</button>
<button class="operator" id="add">+</button>
<button class="number" id="zero">0</button>
<button id="decimal">.</button>
<button id="equal">=</button>
</div>
</div>
</body>
</html>登录后复制在这个HTML结构中，我们有一个计算器的容器，其中有两个子元素，一个是显示区域，另一个是按键区域。显示区域使用一个输入框来显示运算结果，而按键区域则包含了数字、运算符等按键，以及其他特殊按键（例如清除、取反、百分比等）。
接下来，我们需要创建一个CSS样式表来美化我们的计算器。CSS样式如下：
body {
font-family: Arial, sans-serif;
}
#calculator {
margin: 0 auto;
width: 310px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.display {
padding: 10px;
background-color: #f2f2f2;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: right;
}
#result {
width: 100%;
height: 40px;
font-size: 24px;
border: 0;
}
.keys {
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(4, 1fr);
background-color: #efefef;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
button {
width: 100%;
height: 50px;
font-size: 20px;
border: 0;
color: #fff;
background-color: #4CAF50;
cursor: pointer;
outline: none;
}
button:focus {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}登录后复制在这个CSS样式中，我们设置了计算器的整体样式，包括边框、阴影、圆角等。为了让键盘按键可以紧密排列，我们使用了CSS网格布局技术，并设置了按键的样式。
接下来，我们需要编写一个JavaScript脚本来处理计算器的逻辑。我们使用jQuery库来简化处理代码的编写和DOM操作。
我们先要全局定义三个变量：
var firstNumber = ''; var operator = ''; var secondNumber = '';登录后复制
这三个变量将分别存储用户输入的第一个数、运算符和第二个数。
我们使用jQuery的事件处理函数来绑定按键事件。例如，当用户点击数字键时，我们将相应的数字添加到显示区域的输入框中。当用户点击加号和减号键时，我们将相应的运算符存储到变量operator中。当用户点击等号键时，我们根据当前运算符来执行相应的计算并将结果显示到输入框中。具体实现代码如下：
$(document).ready(function() {
$('.number').click(function() {
var input = $('#result').val();
var number = $(this).text();
// 判断当前输入框中是否已经有小数点
if (number === '.') {
if (input.indexOf('.') !== -1) {
return;
}
if (input === '') {
input = '0';
}
}
input += number;
$('#result').val(input);
});
$('.operator').click(function() {
firstNumber = $('#result').val();
operator = $(this).text();
$('#result').val('');
});
$('#equal').click(function() {
secondNumber = $('#result').val();
var result = 0;
var num1 = parseFloat(firstNumber);
var num2 = parseFloat(secondNumber);
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
$('#result').val(result);
});
$('#clear').click(function() {
firstNumber = '';
operator = '';
secondNumber = '';
$('#result').val('');
});
$('#sign').click(function() {
var input = $('#result').val();
var prefix = '';
if (input.charAt(0) === '-') {
prefix = input.substr(1);
} else {
prefix = '-' + input;
}
$('#result').val(prefix);
});
$('#percent').click(function() {
var input = $('#result').val();
var percent = parseFloat(input) / 100;
$('#result').val(percent);
});
$(document).keydown(function(event) {
var key = event.key;
if (!isNaN(key)) {
$('#' + key).click();
} else if (key === '+' || key === '-' || key === '*' || key === '/') {
$('#' + key).click();
} else if (key === 'Enter') {
$('#equal').click();
} else if (key === '.') {
$('#decimal').click();
} else if (event.ctrlKey && (key === 'c' || key === 'C')) {
$('#clear').click();
}
});
});登录后复制在这个JavaScript脚本中，我们使用了jQuery的事件处理函数click来绑定按键事件。当用户点击数字键时，我们从当前输入框的值中读取已经输入的数字，而如果按键是小数点时，我们需要判断当前输入框中是否已经存在小数点，如果存在则忽略该按键。当用户点击加号或减号时，我们将当前输入框中的数保存到变量firstNumber中，并将运算符保存到变量operator中，并清空当前输入框。当用户点击等号时，我们读取输入框中的值作为第二个数，并根据当前运算符来执行相应的计算，计算结果将显示在输入框中。当用户点击清除键、取反键或百分比键时，我们分别执行相应的操作。当用户按下键盘上的相应按键时，我们模拟相应的按键点击事件。例如，当用户按下数字键时，我们将触发相应数字键的点击事件。
最终，通过HTML页面、CSS样式表和JavaScript脚本的结合，我们实现了一个简单的计算器。用户可以通过鼠标或键盘操作来完成四则运算，并且可以进行小数运算以及其他特殊操作，例如清除、取反和百分比等。本文中的实现只是一个基础的原型，如果你需要实现更丰富的功能，例如支持括号、科学计算等，也可以在此基础上进行扩展。
以上就是利用jquery实现计算器的详细内容，更多请关注zzsucai.com其它相关文章！
