你的位置:首页 > Java教程

[Java教程]使用HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)


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

 

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欢迎提出,谢谢!