基于HTML+CSS，jQuery編寫的簡易計(jì)算器后續(xù)（添加了鍵盤監(jiān)聽）
更新時(shí)間：2016年01月05日 17:13:05 作者：嚴(yán)小宇愛編程
這篇文章主要介紹了使用HTML+CSS，jQuery編寫的簡易計(jì)算器后續(xù)（添加了鍵盤監(jiān)聽） 的相關(guān)資料,需要的朋友可以參考下
之前發(fā)布了一款簡易的計(jì)算器，今天做了一下修改，添加了鍵盤監(jiān)聽事件，不用再用鼠標(biāo)點(diǎn)點(diǎn)點(diǎn)啦
JS代碼：
var yunSuan = 0;// 運(yùn)算符號(hào)，0-無運(yùn)算;1-加法;2-減法;3-乘法;4-除法
var change = 0;// 屬于運(yùn)算符后需要清空上一數(shù)值
var num1 = 0;// 運(yùn)算第一個(gè)數(shù)據(jù)
var num2 = 0;// 運(yùn)算第二個(gè)數(shù)據(jù)
var cunChuValue = 0;// 存儲(chǔ)的數(shù)值
$(function() {
$(".number").click(function() {// 點(diǎn)擊數(shù)字觸發(fā)事件
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() {// 點(diǎn)擊清屏觸發(fā)事件
$("#jieguo").html("0");
yunSuan = 0;
change = 0;
num1 = 0;
num2 = 0;
});
$("#tuiGe").click(function() {// 點(diǎn)擊退格觸發(fā)事件
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() {// 點(diǎn)擊運(yùn)算符號(hào)觸發(fā)事件
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() {// 點(diǎn)擊等于符號(hào)觸發(fā)事件
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() {// 點(diǎn)擊存儲(chǔ)觸發(fā)事件
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() {// 點(diǎn)擊取存觸發(fā)事件
change = 1;
$("#jieguo").html(cunChuValue);
});
$("#qingCun").click(function() {// 點(diǎn)擊清存觸發(fā)事件
change = 1;
cunChuValue = 0;
});
$("#leiCun").click(function() {// 點(diǎn)擊累存觸發(fā)事件
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() {// 點(diǎn)擊積存觸發(fā)事件
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);
}
});
});
// 按鍵監(jiān)聽
$(document)
.keydown(
function(event) {
// 數(shù)字監(jiān)聽
if (((event.keyCode > 47 && event.keyCode < 58)
|| (event.keyCode > 95 && event.keyCode < 106) || (event.keyCode == 190 || event.keyCode == 110))
&& !event.shiftKey) {
keyDownNum(event.keyCode);
}
// "+"監(jiān)聽
if ((event.keyCode == 187 && event.shiftKey)
|| event.keyCode == 107) {
keyDownYuSuan(1);
}
// "-"監(jiān)聽
if ((event.keyCode == 189 && event.shiftKey)
|| event.keyCode == 109) {
keyDownYuSuan(2);
}
// "*"監(jiān)聽
if ((event.keyCode == 56 && event.shiftKey)
|| event.keyCode == 106) {
keyDownYuSuan(3);
}
// "/"監(jiān)聽
if (event.keyCode == 191 || event.keyCode == 111) {
keyDownYuSuan(4);
}
// "="監(jiān)聽
if ((event.keyCode == 187 && !event.shiftKey)
|| event.keyCode == 13) {
$("#dengYu").click();
}
// "回退"監(jiān)聽
if (event.keyCode == 8) {
$("#tuiGe").click();
return false;
}
// "清屏"監(jiān)聽
if (event.keyCode == 27 || event.keyCode == 46
|| (event.keyCode == 110 && event.shiftKey)) {
$("#qingPing").click();
return false;
}
// "存儲(chǔ)"監(jiān)聽
if (event.keyCode == 112) {
$("#cunChu").click();
return false;
}
// "取存"監(jiān)聽
if (event.keyCode == 113) {
$("#quCun").click();
return false;
}
// "累存"監(jiān)聽
if (event.keyCode == 114) {
$("#leiCun").click();
return false;
}
// "積存"監(jiān)聽
if (event.keyCode == 115) {
$("#jiCun").click();
return false;
}
// "清存"監(jiān)聽
if (event.keyCode == 117) {
$("#qingCun").click();
return false;
}
});
/**
* 按鍵觸發(fā)運(yùn)算符 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);
}
/**
* 按鍵觸發(fā)數(shù)字 code ASCLL碼
*/
function keyDownNum(code) {
var number = 0;
if (code == 48 || code == 96) {// "0"監(jiān)聽
number = 0;
}
if (code == 49 || code == 97) {// "1"監(jiān)聽
number = 1;
}
if (code == 50 || code == 98) {// "2"監(jiān)聽
number = 2;
}
if (code == 51 || code == 99) {// "3"監(jiān)聽
number = 3;
}
if (code == 52 || code == 100) {// "4"監(jiān)聽
number = 4;
}
if (code == 53 || code == 101) {// "5"監(jiān)聽
number = 5;
}
if (code == 54 || code == 102) {// "6"監(jiān)聽
number = 6;
}
if (code == 55 || code == 103) {// "7"監(jiān)聽
number = 7;
}
if (code == 56 || code == 104) {// "8"監(jiān)聽
number = 8;
}
if (code == 57 || code == 105) {// "9"監(jiān)聽
number = 9;
}
if (code == 190 || code == 110) {// "."監(jiān)聽
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>簡易計(jì)算器</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">存儲(chǔ)(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>
計(jì)算器樣式布局時(shí)借鑒別人的，但是代碼均是本人自己寫的，由于時(shí)間原因沒有來得及測(cè)試，各位大俠在使用過程中發(fā)現(xiàn)有bug歡迎提出，共同學(xué)習(xí)進(jìn)步，謝謝。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)簡易計(jì)算器功能
- jQuery實(shí)現(xiàn)簡單計(jì)算器
- jquery實(shí)現(xiàn)計(jì)算器小功能
- jQuery實(shí)現(xiàn)簡單計(jì)算器功能
- jQuery實(shí)現(xiàn)可以計(jì)算進(jìn)制轉(zhuǎn)換的計(jì)算器
- jQuery實(shí)現(xiàn)計(jì)算器功能
- jQuery實(shí)現(xiàn)的簡單在線計(jì)算器功能
- 一個(gè)簡單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
- jQuery實(shí)現(xiàn)簡易的計(jì)算器
相關(guān)文章
AeroWindow是個(gè)Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動(dòng)。2011-06-06
jquery異步循環(huán)獲取功能實(shí)現(xiàn)代碼
頁面html的repeater控件中有一個(gè)span,需要根據(jù)指定ID異步獲取相關(guān)信息。2010-09-09
jquery選擇器，比較常用的選擇器說明，學(xué)習(xí)jquery的朋友一定要學(xué)習(xí)與了解的知識(shí)。2010-09-09
JQuery擴(kuò)展插件Validate 1 基本使用方法并打包下載
Validate是用于B/S結(jié)構(gòu)客戶端驗(yàn)證用的JQuery擴(kuò)展插件,使用時(shí)需要引用兩個(gè)js文件2011-09-09
jQuery 獲取對(duì)象 定位子對(duì)象，學(xué)習(xí)jquery 定位子對(duì)象的朋友可以參考下。2010-05-05
制作高質(zhì)量的JQuery Plugin 插件的方法
最近jquery非常流行，想個(gè)性化定制一些功能，就可以將代碼寫成插件的形式，方便使用與修改。2010-04-04
今天遇到一個(gè)問題需要獲取tagName，使用jquery，查詢了一下，大家說用$("dd").attr("tagName")能獲取到，但是得到的返回值是undefined，于是又查詢餓了許久，返回遍歷了一下jquery封裝的對(duì)象2011-11-11
jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。2010-05-05
剛剛寫的一個(gè)jquery的彈出層的插件2008-10-10
jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
最近把jquery中的dom操作和jquery中的事件和動(dòng)畫的方法都大體測(cè)了一下。本來想細(xì)細(xì)的把每個(gè)方法都寫出來介紹下2011-11-11