Susulan kepada kalkulator ringkas yang ditulis dalam jQuery berdasarkan HTML CSS (pemantauan papan kekunci ditambah)

Saya mengeluarkan kalkulator ringkas sebelum ini Hari ini saya membuat beberapa pengubahsuaian dan menambah acara pemantauan papan kekunci, jadi anda tidak perlu lagi mengklik dengan tetikus

Kod 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]+.&#63;[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);
}

Salin selepas log masuk

Kod 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>

Salin selepas log masuk

Susun atur gaya kalkulator dipinjam daripada orang lain, tetapi semua kod ditulis oleh saya sendiri atas sebab masa, saya tidak mempunyai masa untuk mengujinya Jika anda menemui sebarang pepijat semasa digunakan, sila laporkan dan belajar dan maju bersama. Terima kasih.