基于HTML+CSS，jQuery編寫(xiě)的簡(jiǎn)易計(jì)算器后續(xù)（添加了鍵盤(pán)監(jiān)聽(tīng)）

2020-03-24 16:04:15

字體：大中小

供稿：網(wǎng)友

之前發(fā)布了一款簡(jiǎn)易的計(jì)算器，今天做了一下修改，添加了鍵盤(pán)監(jiān)聽(tīng)事件，不用再用鼠標(biāo)點(diǎn)點(diǎn)點(diǎn)啦JS代碼：var yunSuan = 0;// 運(yùn)算符號(hào)，0-無(wú)運(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 + ".";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)聽(tīng)$(document).keydown(function(event) {// 數(shù)字監(jiān)聽(tīng)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)聽(tīng)if ((event.keyCode == 187 && event.shiftKey)|| event.keyCode == 107) {keyDownYuSuan(1);// "-"監(jiān)聽(tīng)if ((event.keyCode == 189 && event.shiftKey)|| event.keyCode == 109) {keyDownYuSuan(2);// "*"監(jiān)聽(tīng)if ((event.keyCode == 56 && event.shiftKey)|| event.keyCode == 106) {keyDownYuSuan(3);// "/"監(jiān)聽(tīng)if (event.keyCode == 191 || event.keyCode == 111) {keyDownYuSuan(4);// "="監(jiān)聽(tīng)if ((event.keyCode == 187 && !event.shiftKey)|| event.keyCode == 13) {$("#dengYu").click();// "回退"監(jiān)聽(tīng)if (event.keyCode == 8) {$("#tuiGe").click();return false;// "清屏"監(jiān)聽(tīng)if (event.keyCode == 27 || event.keyCode == 46|| (event.keyCode == 110 && event.shiftKey)) {$("#qingPing").click();return false;// "存儲(chǔ)"監(jiān)聽(tīng)if (event.keyCode == 112) {$("#cunChu").click();return false;// "取存"監(jiān)聽(tīng)if (event.keyCode == 113) {$("#quCun").click();return false;// "累存"監(jiān)聽(tīng)if (event.keyCode == 114) {$("#leiCun").click();return false;// "積存"監(jiān)聽(tīng)if (event.keyCode == 115) {$("#jiCun").click();return false;// "清存"監(jiān)聽(tīng)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)聽(tīng)number = 0;if (code == 49 || code == 97) {// "1"監(jiān)聽(tīng)number = 1;if (code == 50 || code == 98) {// "2"監(jiān)聽(tīng)number = 2;if (code == 51 || code == 99) {// "3"監(jiān)聽(tīng)number = 3;if (code == 52 || code == 100) {// "4"監(jiān)聽(tīng)number = 4;if (code == 53 || code == 101) {// "5"監(jiān)聽(tīng)number = 5;if (code == 54 || code == 102) {// "6"監(jiān)聽(tīng)number = 6;if (code == 55 || code == 103) {// "7"監(jiān)聽(tīng)number = 7;if (code == 56 || code == 104) {// "8"監(jiān)聽(tīng)number = 8;if (code == 57 || code == 105) {// "9"監(jiān)聽(tīng)number = 9;if (code == 190 || code == 110) {// "."監(jiān)聽(tīng)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 + ".";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 簡(jiǎn)易計(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 td colspan="" div id="jieguo" /div /td /tr button id="cunChu" 存儲(chǔ)(F) /button /td button id="quCun" 取存(F) /button /td button id="tuiGe" 退格 /button /td button id="qingPing" 清屏 /button /td /tr button id="leiCun" 累存(F) /button /td button id="jiCun" 積存(F) /button /td button id="qingCun" 清存(F) /button /td button id="Chuyi" name="" ÷ /button /td /tr button id="seven" name="" /button /td button id="eight" name="" /button /td button id="nine" name="" /button /td button id="chengYi" name="" × /button /td /tr button id="four" name="" /button /td button id="five" name="" /button /td button id="six" name="" /button /td button id="jianQu" name="" - /button /td /tr button id="one" name="" /button /td button id="two" name="" /button /td button id="three" name="" /button /td button id="jiaShang" name="" + /button /td /tr button id="zero" name="" /button /td button id="dian" name="." . /button /td button id="zhengFu" name="-" +/- /button /td button id="dengYu" = /button /td /tr /table /body /html 計(jì)算器樣式布局時(shí)借鑒別人的，但是代碼均是本人自己寫(xiě)的，由于時(shí)間原因沒(méi)有來(lái)得及測(cè)試，各位大俠在使用過(guò)程中發(fā)現(xiàn)有bug歡迎提出，共同學(xué)習(xí)進(jìn)步，謝謝。更多編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：如何使用css3+html5來(lái)制作文字霓虹燈效果（付完整代碼）

下一篇：基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼