基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

前端技术 2023/09/06 JavaScript

之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦

JS代码：

var yunSuan = 0;// 运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法
var change = 0;// 属于运算符后需要清空上一数值
var num1 = 0;// 运算第一个数据
var num2 = 0;// 运算第二个数据
var cunChuValue = 0;// 存储的数值
$(function() {
$(\".number\").click(function() {// 点击数字触发事件
var num = $(this).attr(\'name\');
var oldValue = $(\"#jieguo\").html();
if (change == 1) {
oldValue = \"0\";
change = 0;
}
var newValue = \"\";
if (num == -1) {
oldValue = parseFloat(oldValue);
newValue = oldValue * -1;
} else if (num == \".\") {
if (oldValue.indexOf(\'.\') == -1)
newValue = oldValue + \".\";
else
newValue = oldValue;
} else {
if (oldValue == 0 && oldValue.indexOf(\'.\') == -1) {
newValue = num;
} else {
newValue = oldValue + num;
}
}
$(\"#jieguo\").html(newValue);
});
$(\"#qingPing\").click(function() {// 点击清屏触发事件
$(\"#jieguo\").html(\"0\");
yunSuan = 0;
change = 0;
num1 = 0;
num2 = 0;
});
$(\"#tuiGe\").click(function() {// 点击退格触发事件
if (change == 1) {
yunSuan = 0;
change = 0;
}
var value = $(\"#jieguo\").html();
if (value.length == 1) {
$(\"#jieguo\").html(\"0\");
} else {
value = value.substr(0, value.length - 1);
$(\"#jieguo\").html(value);
}
});
$(\".yunSuan\").click(function() {// 点击运算符号触发事件
change = 1;
yuSuan = $(this).attr(\'name\');
var value = $(\"#jieguo\").html();
var dianIndex = value.indexOf(\".\");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
num1 = parseFloat(value);
});
$(\"#dengYu\").click(function() {// 点击等于符号触发事件
var value = $(\"#jieguo\").html();
var dianIndex = value.indexOf(\".\");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
num2 = parseFloat(value);
var sum = 0;
if (yuSuan == 1) {
sum = num1 + num2;
} else if (yuSuan == 2) {
sum = num1 - num2;
} else if (yuSuan == 3) {
sum = num1 * num2;
} else if (yuSuan == 4) {
sum = num1 / num2;
} else if (yuSuan == 0 || num1 == 0 || num2 == 0) {
sum = num1 + num2;
}
var re = /^[0-9]+.?[0-9]*$/;
if (re.test(sum)) {
sum = sum.toFixed(2);
}
$(\"#jieguo\").html(sum);
change = 1;
yuSuan = 0;
num1 = 0;
num2 = 0;
});
$(\"#cunChu\").click(function() {// 点击存储触发事件
change = 1;
var value = $(\"#jieguo\").html();
var dianIndex = value.indexOf(\".\");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
cunChuValue = parseFloat(value);
});
$(\"#quCun\").click(function() {// 点击取存触发事件
change = 1;
$(\"#jieguo\").html(cunChuValue);
});
$(\"#qingCun\").click(function() {// 点击清存触发事件
change = 1;
cunChuValue = 0;
});
$(\"#leiCun\").click(function() {// 点击累存触发事件
change = 1;
var value = $(\"#jieguo\").html();
var dianIndex = value.indexOf(\".\");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
cunChuValue += parseFloat(value);
});
$(\"#jiCun\").click(function() {// 点击积存触发事件
change = 1;
var value = $(\"#jieguo\").html();
var dianIndex = value.indexOf(\".\");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
if (cunChuValue == 0) {
cunChuValue = parseFloat(value);
} else {
cunChuValue = cunChuValue * parseFloat(value);
}
});
});
// 按键监听
$(document)
.keydown(
function(event) {
// 数字监听
if (((event.keyCode > 47 && event.keyCode < 58)
|| (event.keyCode > 95 && event.keyCode < 106) || (event.keyCode == 190 || event.keyCode == 110))
&& !event.shiftKey) {
keyDownNum(event.keyCode);
}
// \"+\"监听
if ((event.keyCode == 187 && event.shiftKey)
|| event.keyCode == 107) {
keyDownYuSuan(1);
}
// \"-\"监听
if ((event.keyCode == 189 && event.shiftKey)
|| event.keyCode == 109) {
keyDownYuSuan(2);
}
// \"*\"监听
if ((event.keyCode == 56 && event.shiftKey)
|| event.keyCode == 106) {
keyDownYuSuan(3);
}
// \"/\"监听
if (event.keyCode == 191 || event.keyCode == 111) {
keyDownYuSuan(4);
}
// \"=\"监听
if ((event.keyCode == 187 && !event.shiftKey)
|| event.keyCode == 13) {
$(\"#dengYu\").click();
}
// \"回退\"监听
if (event.keyCode == 8) {
$(\"#tuiGe\").click();
return false;
}
// \"清屏\"监听
if (event.keyCode == 27 || event.keyCode == 46
|| (event.keyCode == 110 && event.shiftKey)) {
$(\"#qingPing\").click();
return false;
}
// \"存储\"监听
if (event.keyCode == 112) {
$(\"#cunChu\").click();
return false;
}
// \"取存\"监听
if (event.keyCode == 113) {
$(\"#quCun\").click();
return false;
}
// \"累存\"监听
if (event.keyCode == 114) {
$(\"#leiCun\").click();
return false;
}
// \"积存\"监听
if (event.keyCode == 115) {
$(\"#jiCun\").click();
return false;
}
// \"清存\"监听
if (event.keyCode == 117) {
$(\"#qingCun\").click();
return false;
}
});
/**
* 按键触发运算符 value 1-\'+\' 2-\'-\' 3-\'*\' 4-\'/\'
*/
function keyDownYuSuan(value) {
change = 1;
yuSuan = value;
var value = $(\"#jieguo\").html();
var dianIndex = value.indexOf(\".\");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
num1 = parseFloat(value);
}
/**
* 按键触发数字 code ASCLL码
*/
function keyDownNum(code) {
var number = 0;
if (code == 48 || code == 96) {// \"0\"监听
number = 0;
}
if (code == 49 || code == 97) {// \"1\"监听
number = 1;
}
if (code == 50 || code == 98) {// \"2\"监听
number = 2;
}
if (code == 51 || code == 99) {// \"3\"监听
number = 3;
}
if (code == 52 || code == 100) {// \"4\"监听
number = 4;
}
if (code == 53 || code == 101) {// \"5\"监听
number = 5;
}
if (code == 54 || code == 102) {// \"6\"监听
number = 6;
}
if (code == 55 || code == 103) {// \"7\"监听
number = 7;
}
if (code == 56 || code == 104) {// \"8\"监听
number = 8;
}
if (code == 57 || code == 105) {// \"9\"监听
number = 9;
}
if (code == 190 || code == 110) {// \".\"监听
number = \".\";
}
var num = number;
var oldValue = $(\"#jieguo\").html();
if (change == 1) {
oldValue = \"0\";
change = 0;
}
var newValue = \"\";
if (num == -1) {
oldValue = parseFloat(oldValue);
newValue = oldValue * -1;
} else if (num == \".\") {
if (oldValue.indexOf(\'.\') == -1)
newValue = oldValue + \".\";
else
newValue = oldValue;
} else {
if (oldValue == 0 && oldValue.indexOf(\'.\') == -1) {
newValue = num;
} else {
newValue = oldValue + num;
}
}
$(\"#jieguo\").html(newValue);
}

HTML/CSS代码：

<%@ page language=\"java\" contentType=\"text/html; charset=UTF-\"
pageEncoding=\"UTF-\"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=\" utf-\">
<title>简易计算器</title>
<jsp:include page=\"inc/easyui.jsp\"></jsp:include>
<style type=\"text/css\">
button {
font-size: px;
font-weight: bold;
width: px;
}
</style>
<script type=\"text/javascript\" src=\"js.js\"></script>
</head>
<body>
<table>
<tr>
<td colspan=\"\">
<div id=\"jieguo\"
style=\"width: px;height: px;font-size: px;text-align: right;font-weight:bold;color: red;\"></div>
</td>
</tr>
<tr style=\"height: px;\">
<td>
<button id=\"cunChu\">存储(F)</button></td>
<td>
<button id=\"quCun\">取存(F)</button></td>
<td>
<button id=\"tuiGe\"> 退 格 </button></td>
<td>
<button id=\"qingPing\"> 清 屏 </button></td>
</tr>
<tr style=\"height: px;\">
<td>
<button id=\"leiCun\">累存(F)</button></td>
<td>
<button id=\"jiCun\">积存(F)</button></td>
<td>
<button id=\"qingCun\">清存(F)</button></td>
<td>
<button id=\"Chuyi\" class=\"yunSuan\" name=\"\">  ÷  </button>
</td>
</tr>
<tr style=\"height: px;\">
<td>
<button id=\"seven\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"eight\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"nine\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"chengYi\" class=\"yunSuan\" name=\"\">  ×  </button>
</td>
</tr>
<tr style=\"height: px;\">
<td>
<button id=\"four\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"five\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"six\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"jianQu\" class=\"yunSuan\" name=\"\">  -  </button>
</td>
</tr>
<tr style=\"height: px;\">
<td>
<button id=\"one\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"two\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"three\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"jiaShang\" class=\"yunSuan\" name=\"\">  +  </button>
</td>
</tr>
<tr style=\"height: px;\">
<td>
<button id=\"zero\" class=\"number\" name=\"\">    </button>
</td>
<td>
<button id=\"dian\" class=\"number\" name=\".\">  .  </button>
</td>
<td>
<button id=\"zhengFu\" class=\"number\" name=\"-\">  +/-  </button>
</td>
<td>
<button id=\"dengYu\">  =  </button></td>
</tr>
</table>
</body>
</html>

计算器样式布局时借鉴别人的，但是代码均是本人自己写的，由于时间原因没有来得及测试，各位大侠在使用过程中发现有bug欢迎提出，共同学习进步，谢谢。

本文地址：https://www.stayed.cn/item/16703

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案