基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦
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欢迎提出，共同学习进步，谢谢。
相关推荐
-
jQuery计算textarea中文字数(剩余个数)的小程序
复制代码 代码如下: <div class="area"> <p> 还可以输入<b class="num">140</b>字</p> <textarea class="chackTextarea"></textarea> </div> <script type="text/java
-
基于jQuery的计算文本框字数的代码
一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动 二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背
-
jQuery实现的简单在线计算器功能
本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
jquery精度计算代码 jquery指定精确小数位
本文实例为大家分享了jquery指定精确小数位的具体代码,供大家参考,具体内容如下 /** * 将标签的值格式化 * id 标签id * min 最小值 * max 最大值 */ function toFloat(id,min,max){ var htmlVal = $("#"+id).html(); var index = htmlVal.indexOf("."); var result = ""; if(index > 0){ html
-
Jquery AJAX 用于计算点击率(统计)
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Demo </TITLE> </HEAD> <BODY> <script src="jquery.js" type="text/javascript"></
-
jQuery实现购物车计算价格功能的方法
本文实例讲述了jQuery实现购物车计算价格功能的方法.分享给大家供大家参考.具体如下: 目的 实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改. 实现思路 1.当点击进入界面,刷新的时候触发body内的onload=""方法,跳转到JS代码.这样做的原因是在数据库内我们只会存储某客户的准备购买的商品件数,而不会存储每类商品价格的小计和购物车内所有物品的商品总价格,初始化的目的就是为将这些数字计算出来后显示在前台界面上. 2.当更改数量输入框中每个商品的数量时,整个
-
一个简单的jQuery计算器实现了连续计算功能
一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
-
jQuery实现根据生日计算年龄 星座 生肖
<html> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> //根据输入的生日自动获取星座,生肖和年龄. var year = new Array("
-
js数值计算时使用parseInt进行数据类型转换(jquery)
js获取到的数据默认都是string字符串类型的,如果进行数值的运算必须使用parseInt进行转换成数值的操作. html代码: 复制代码 代码如下: <div id="archive"> <input type="hidden" name="page" value="1" /> </div> js代码: 复制代码 代码如下: $("#archive").bin
-
jQuery实现购物车多物品数量的加减+总价计算
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现购物