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

最新推荐文章于 2021-09-26 20:45:44 发布

Smooth0815

最新推荐文章于 2021-09-26 20:45:44 发布

阅读量217

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/JoeyYan/p/5103000.html

版权

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

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">&nbsp;退&nbsp;格&nbsp;</button></td>
 33             <td>
 34                 <button id="qingPing">&nbsp;清&nbsp;屏&nbsp;</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">&nbsp;&nbsp;÷&nbsp;&nbsp;</button>
 45             </td>
 46         </tr>
 47         <tr style="height: 40px;">
 48             <td>
 49                 <button id="seven" class="number" name="7">&nbsp;&nbsp;7&nbsp;&nbsp;</button>
 50             </td>
 51             <td>
 52                 <button id="eight" class="number" name="8">&nbsp;&nbsp;8&nbsp;&nbsp;</button>
 53             </td>
 54             <td>
 55                 <button id="nine" class="number" name="9">&nbsp;&nbsp;9&nbsp;&nbsp;</button>
 56             </td>
 57             <td>
 58                 <button id="chengYi" class="yunSuan" name="3">&nbsp;&nbsp;×&nbsp;&nbsp;</button>
 59             </td>
 60         </tr>
 61         <tr style="height: 40px;">
 62             <td>
 63                 <button id="four" class="number" name="4">&nbsp;&nbsp;4&nbsp;&nbsp;</button>
 64             </td>
 65             <td>
 66                 <button id="five" class="number" name="5">&nbsp;&nbsp;5&nbsp;&nbsp;</button>
 67             </td>
 68             <td>
 69                 <button id="six" class="number" name="6">&nbsp;&nbsp;6&nbsp;&nbsp;</button>
 70             </td>
 71             <td>
 72                 <button id="jianQu" class="yunSuan" name="2">&nbsp;&nbsp;-&nbsp;&nbsp;</button>
 73             </td>
 74         </tr>
 75         <tr style="height: 40px;">
 76             <td>
 77                 <button id="one" class="number" name="1">&nbsp;&nbsp;1&nbsp;&nbsp;</button>
 78             </td>
 79             <td>
 80                 <button id="two" class="number" name="2">&nbsp;&nbsp;2&nbsp;&nbsp;</button>
 81             </td>
 82             <td>
 83                 <button id="three" class="number" name="3">&nbsp;&nbsp;3&nbsp;&nbsp;</button>
 84             </td>
 85             <td>
 86                 <button id="jiaShang" class="yunSuan" name="1">&nbsp;&nbsp;+&nbsp;&nbsp;</button>
 87             </td>
 88         </tr>
 89         <tr style="height: 40px;">
 90             <td>
 91                 <button id="zero" class="number" name="0">&nbsp;&nbsp;0&nbsp;&nbsp;</button>
 92             </td>
 93             <td>
 94                 <button id="dian" class="number" name=".">&nbsp;&nbsp;.&nbsp;&nbsp;</button>
 95             </td>
 96             <td>
 97                 <button id="zhengFu" class="number" name="-1">&nbsp;&nbsp;+/-&nbsp;&nbsp;</button>
 98             </td>
 99             <td>
100                 <button id="dengYu">&nbsp;&nbsp;=&nbsp;&nbsp;</button></td>
101         </tr>
102     </table>
103 </body>
104 </html>

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

转载于:https://www.cnblogs.com/JoeyYan/p/5103000.html

Smooth0815

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦JS代码：var yunSuan = 0;// 运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法var change = 0;// 属于运算符后需要清空上一数值var num1 = 0;// 运算第一个数据var num2 = 0;// 运算第二个数据var...
复制链接

扫一扫