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

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

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 10 button { 11 font-size: 18px; 12 font-weight: bold; 13 width: 90px; 14 } 15 16 17 18 19 20 21 22

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110489

更新时间：2022-11-17 阅读：37次