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"> refund " </button></td>
<td>
<button id="qingPing"> qing screen </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=""> present </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=""> x </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>
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.