基于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導航特效代碼