Un suivi d'une simple calculatrice écrite en jQuery basée sur HTML CSS (surveillance du clavier ajoutée)_jquery

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);

}

<%@ 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>