使用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 < 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 + ".";        else            newValue = oldValue;    } else {        if (oldValue == 0 && oldValue.indexOf('.') == -1) {            newValue = num;        } else {            newValue = oldValue + num;        }    }    $("#jieguo").html(newValue);}

HTML/CSS代码：

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"  2     pageEncoding="UTF-8"%>  3 <!DOCTYPE html>  4 <html>  5 <head>  6 <meta charset=" utf-8">  7 <title>简易计算器</title>  8 <jsp:include page="inc/easyui.jsp"></jsp:include>  9 <style type="text/css"> 10 button { 11     font-size: 18px; 12     font-weight: bold; 13     width: 90px; 14 } 15 </style> 16 <script type="text/javascript" src="js.js"></script> 17 </head> 18 <body> 19     <table> 20         <tr> 21             <td colspan="4"> 22                 <div id="jieguo" 23                     style="width: 370px;height: 30px;font-size: 30px;text-align: right;font-weight:bold;color: red;">0</div> 24             </td> 25         </tr> 26         <tr style="height: 40px;"> 27             <td> 28                 <button id="cunChu">存储(F1)</button></td> 29             <td> 30                 <button id="quCun">取存(F2)</button></td> 31             <td> 32                 <button id="tuiGe"> 退 格 </button></td> 33             <td> 34                 <button id="qingPing"> 清 屏 </button></td> 35         </tr> 36         <tr style="height: 40px;"> 37             <td> 38                 <button id="leiCun">累存(F3)</button></td> 39             <td> 40                 <button id="jiCun">积存(F4)</button></td> 41             <td> 42                 <button id="qingCun">清存(F6)</button></td> 43             <td> 44                 <button id="Chuyi" class="yunSuan" name="4">  &divide;  </button> 45             </td> 46         </tr> 47         <tr style="height: 40px;"> 48             <td> 49                 <button id="seven" class="number" name="7">  7  </button> 50             </td> 51             <td> 52                 <button id="eight" class="number" name="8">  8  </button> 53             </td> 54             <td> 55                 <button id="nine" class="number" name="9">  9  </button> 56             </td> 57             <td> 58                 <button id="chengYi" class="yunSuan" name="3">  &times;  </button> 59             </td> 60         </tr> 61         <tr style="height: 40px;"> 62             <td> 63                 <button id="four" class="number" name="4">  4  </button> 64             </td> 65             <td> 66                 <button id="five" class="number" name="5">  5  </button> 67             </td> 68             <td> 69                 <button id="six" class="number" name="6">  6  </button> 70             </td> 71             <td> 72                 <button id="jianQu" class="yunSuan" name="2">  -  </button> 73             </td> 74         </tr> 75         <tr style="height: 40px;"> 76             <td> 77                 <button id="one" class="number" name="1">  1  </button> 78             </td> 79             <td> 80                 <button id="two" class="number" name="2">  2  </button> 81             </td> 82             <td> 83                 <button id="three" class="number" name="3">  3  </button> 84             </td> 85             <td> 86                 <button id="jiaShang" class="yunSuan" name="1">  +  </button> 87             </td> 88         </tr> 89         <tr style="height: 40px;"> 90             <td> 91                 <button id="zero" class="number" name="0">  0  </button> 92             </td> 93             <td> 94                 <button id="dian" class="number" name=".">  .  </button> 95             </td> 96             <td> 97                 <button id="zhengFu" class="number" name="-1">  +/-  </button> 98             </td> 99             <td>100                 <button id="dengYu">  =  </button></td>101         </tr>102     </table>103 </body>104 </html>

 

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