基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016-01-05 00:00
721 查看
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦
JS代码:
HTML/CSS代码:
计算器样式布局时借鉴别人的,但是代码均是本人自己写的,由于时间原因没有来得及测试,各位大侠在使用过程中发现有bug欢迎提出,共同学习进步,谢谢。
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代码:
<%@ page language="java" contentType="text/html; charset=UTF-" pageEncoding="UTF-"%> <!DOCTYPE html> <html> <head> <meta charset=" utf-"> <title>简易计算器</title> <jsp:include page="inc/easyui.jsp"></jsp:include> <style type="text/css"> button { font-size: px; font-weight: bold; width: px; } </style> <script type="text/javascript" src="js.js"></script> </head> <body> <table> <tr> <td colspan=""> <div id="jieguo" style="width: px;height: px;font-size: px;text-align: right;font-weight:bold;color: red;"></div> </td> </tr> <tr style="height: px;"> <td> <button id="cunChu">存储(F)</button></td> <td> <button id="quCun">取存(F)</button></td> <td> <button id="tuiGe"> 退 格 </button></td> <td> <button id="qingPing"> 清 屏 </button></td> </tr> <tr style="height: px;"> <td> <button id="leiCun">累存(F)</button></td> <td> <button id="jiCun">积存(F)</button></td> <td> <button id="qingCun">清存(F)</button></td> <td> <button id="Chuyi" class="yunSuan" name=""> ÷ </button> </td> </tr> <tr style="height: px;"> <td> <button id="seven" class="number" name=""> </button> </td> <td> <button id="eight" class="number" name=""> </button> </td> <td> <button id="nine" class="number" name=""> </button> </td> <td> <button id="chengYi" class="yunSuan" name=""> × </button> </td> </tr> <tr style="height: px;"> <td> <button id="four" class="number" name=""> </button> </td> <td> <button id="five" class="number" name=""> </button> </td> <td> <button id="six" class="number" name=""> </button> </td> <td> <button id="jianQu" class="yunSuan" name=""> - </button> </td> </tr> <tr style="height: px;"> <td> <button id="one" class="number" name=""> </button> </td> <td> <button id="two" class="number" name=""> </button> </td> <td> <button id="three" class="number" name=""> </button> </td> <td> <button id="jiaShang" class="yunSuan" name=""> + </button> </td> </tr> <tr style="height: px;"> <td> <button id="zero" class="number" name=""> </button> </td> <td> <button id="dian" class="number" name="."> . </button> </td> <td> <button id="zhengFu" class="number" name="-"> +/- </button> </td> <td> <button id="dengYu"> = </button></td> </tr> </table> </body> </html>
计算器样式布局时借鉴别人的,但是代码均是本人自己写的,由于时间原因没有来得及测试,各位大侠在使用过程中发现有bug欢迎提出,共同学习进步,谢谢。
您可能感兴趣的文章:
一个简单的jQuery计算器实现了连续计算功能相关文章推荐
- 2016/1/4--jquery
- jQueryEasyUi验证
- fundamentals of the jQuery library
- jQuery $.extend() 和 $.fn.extend() 用法
- jquery中文api
- jQuery打造动态下滑菜单
- jQuery 自定义鼠标右键菜单
- jquery回车键获取input框焦点
- html中解决jquery多版本冲突问题
- Java 夹杂文本字段的文件上传 后台实现(包括前端jquery实现的备忘)
- jquery 选择器
- jQuery返回顶部实用插件
- jQuery瀑布流实例无限滚动加载图片
- Jquery一个slideToggle搞定div的隐藏与显示
- Jquery-中括号与冒号([]与:)的用法
- Html5添加全屏背景视频jQuery插件教程
- 沫沫金 - 实战总结jQuery进阶技巧图册
- JQuery文件上传插件uploadify在MVC中Session丢失的解决方案
- jquery获取radiobutton的选中值
- jQuery插件之ajaxFileUpload