使用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   4   5   6   7   8   9  16 

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