使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）_html/css_WEB-ITnose

之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦

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  95 && event.keyCode         
 
    
HTML/CSS代码：
    
         
  1   3   4   5   6   7   8   9  16  17  18  19     

20 21 25 26 27 29 31 33 35 36 37 39 41 43 46 47 48 51 54 57 60 61 62 65 68 71 74 75 76 79 82 85 88 89 90 93 96 99 101 102

22 24
28 存储(F1)	30 取存(F2)	32 退 格	34 清 屏
38 累存(F3)	40 积存(F4)	42 清存(F6)	44 ÷ 45
49 7 50	52 8 53	55 9 56	58 × 59
63 4 64	66 5 67	69 6 70	72 - 73
77 1 78	80 2 81	83 3 84	86 + 87
91 0 92	94 . 95	97 +/- 98	100 =

103 104

计算器样式布局有所借鉴，代码均为原创，未经授权禁止转载；内容未经过严格测试，如遇BUG欢迎提出，谢谢！