基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

2020-03-24 16:04:15

字体：大中小

来源：转载

供稿：网友

之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦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 + ".";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 + ".";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 td colspan="" div id="jieguo" /div /td /tr button id="cunChu" 存储(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 计算器样式布局时借鉴别人的，但是代码均是本人自己写的，由于时间原因没有来得及测试，各位大侠在使用过程中发现有bug欢迎提出，共同学习进步，谢谢。更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：如何使用css3+html5来制作文字霓虹灯效果（付完整代码）

下一篇：基于HTML+CSS+JS实现增加删除修改tab导航特效代码