欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-18 14:06: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 + ".";            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 30 32 34
38 40 42 44 45
49 50 52 53 55 56 58 59
63 64 66 67 69 70 72 73
77 78 80 81 83 84 86 87
91 92 94 95 97 98 100
103 104

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