Simple calculator written based on HTML+CSS jQuery (added keyboard listening)

  • 2020-11-18 06:06:58
  • OfStack

Before the release of a simple calculator, today did 1 modification, added keyboard monitoring events, no longer use the mouse point and click

JS code:


var yunSuan = 0;//  Operational symbol, 0- No operation ;1- add ;2- subtraction ;3- The multiplication ;4- division 
var change = 0;//  Clean up after belonging to the operator 1 The numerical 
var num1 = 0;//  Computing the first 1 A data 
var num2 = 0;//  Computing the first 2 A data 
var cunChuValue = 0;//  Stored value 
$(function() {
$(".number").click(function() {//  Click on the number to trigger the event 
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() {//  Click the clear trigger event 
$("#jieguo").html("0");
yunSuan = 0;
change = 0;
num1 = 0;
num2 = 0;
});
$("#tuiGe").click(function() {//  Point repulse lattice triggers the event 
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() {//  Click the operation symbol to trigger the event 
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() {//  Click equals symbol to trigger the event 
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() {//  Click store trigger event 
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() {//  Click the save trigger event 
change = 1;
$("#jieguo").html(cunChuValue);
});
$("#qingCun").click(function() {//  Click save trigger event 
change = 1;
cunChuValue = 0;
});
$("#leiCun").click(function() {//  Click accumulator to trigger the event 
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() {//  Click accumulate trigger event 
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);
}
});
});
//  Keys to monitor 
$(document)
.keydown(
function(event) {
//  Digital surveillance 
if (((event.keyCode > 47 && event.keyCode < 58)
|| (event.keyCode > 95 && event.keyCode < 106) || (event.keyCode == 190 || event.keyCode == 110))
&& !event.shiftKey) {
keyDownNum(event.keyCode);
}
// "+" Listening to the 
if ((event.keyCode == 187 && event.shiftKey)
|| event.keyCode == 107) {
keyDownYuSuan(1);
}
// "-" Listening to the 
if ((event.keyCode == 189 && event.shiftKey)
|| event.keyCode == 109) {
keyDownYuSuan(2);
}
// "*" Listening to the 
if ((event.keyCode == 56 && event.shiftKey)
|| event.keyCode == 106) {
keyDownYuSuan(3);
}
// "/" Listening to the 
if (event.keyCode == 191 || event.keyCode == 111) {
keyDownYuSuan(4);
}
// "=" Listening to the 
if ((event.keyCode == 187 && !event.shiftKey)
|| event.keyCode == 13) {
$("#dengYu").click();
}
// " The fallback " Listening to the 
if (event.keyCode == 8) {
$("#tuiGe").click();
return false;
}
// " Clear the screen " Listening to the 
if (event.keyCode == 27 || event.keyCode == 46
|| (event.keyCode == 110 && event.shiftKey)) {
$("#qingPing").click();
return false;
}
// " storage " Listening to the 
if (event.keyCode == 112) {
$("#cunChu").click();
return false;
}
// " Take to save " Listening to the 
if (event.keyCode == 113) {
$("#quCun").click();
return false;
}
// " Tired to save " Listening to the 
if (event.keyCode == 114) {
$("#leiCun").click();
return false;
}
// " Stored up " Listening to the 
if (event.keyCode == 115) {
$("#jiCun").click();
return false;
}
// " Clear memory " Listening to the 
if (event.keyCode == 117) {
$("#qingCun").click();
return false;
}
});
/**
*  Key trigger operator  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);
}
/**
*  Key trigger number  code ASCLL code 
*/
function keyDownNum(code) {
var number = 0;
if (code == 48 || code == 96) {// "0" Listening to the 
number = 0;
}
if (code == 49 || code == 97) {// "1" Listening to the 
number = 1;
}
if (code == 50 || code == 98) {// "2" Listening to the 
number = 2;
}
if (code == 51 || code == 99) {// "3" Listening to the 
number = 3;
}
if (code == 52 || code == 100) {// "4" Listening to the 
number = 4;
}
if (code == 53 || code == 101) {// "5" Listening to the 
number = 5;
}
if (code == 54 || code == 102) {// "6" Listening to the 
number = 6;
}
if (code == 55 || code == 103) {// "7" Listening to the 
number = 7;
}
if (code == 56 || code == 104) {// "8" Listening to the 
number = 8;
}
if (code == 57 || code == 105) {// "9" Listening to the 
number = 9;
}
if (code == 190 || code == 110) {// "." Listening to the 
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 code:


<%@ page language="java" contentType="text/html; charset=UTF-"
pageEncoding="UTF-"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-">
<title> Simple calculator </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"> storage (F)</button></td>
<td>
<button id="quCun"> Take to save (F)</button></td>
<td>
<button id="tuiGe">&nbsp; refund &nbsp; " &nbsp;</button></td>
<td>
<button id="qingPing">&nbsp; qing &nbsp; screen &nbsp;</button></td>
</tr>
<tr style="height: px;">
<td>
<button id="leiCun"> Tired to save (F)</button></td>
<td>
<button id="jiCun"> Stored up (F)</button></td>
<td>
<button id="qingCun"> Clear memory (F)</button></td>
<td>
<button id="Chuyi" class="yunSuan" name="">&nbsp;&nbsp; present &nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: px;">
<td>
<button id="seven" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="eight" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="nine" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="chengYi" class="yunSuan" name="">&nbsp;&nbsp; x &nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: px;">
<td>
<button id="four" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="five" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="six" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="jianQu" class="yunSuan" name="">&nbsp;&nbsp;-&nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: px;">
<td>
<button id="one" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="two" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="three" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="jiaShang" class="yunSuan" name="">&nbsp;&nbsp;+&nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: px;">
<td>
<button id="zero" class="number" name="">&nbsp;&nbsp;&nbsp;&nbsp;</button>
</td>
<td>
<button id="dian" class="number" name=".">&nbsp;&nbsp;.&nbsp;&nbsp;</button>
</td>
<td>
<button id="zhengFu" class="number" name="-">&nbsp;&nbsp;+/-&nbsp;&nbsp;</button>
</td>
<td>
<button id="dengYu">&nbsp;&nbsp;=&nbsp;&nbsp;</button></td>
</tr>
</table>
</body>
</html> 

When the calculator style layout draw lessons from others, but the code is all written by myself, due to time reason did not have time to test, you heroes found bug in the process of using welcome to put forward, common learning progress, thank you.


Related articles: