基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)


Posted in Javascript onJanuary 05, 2016

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

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欢迎提出,共同学习进步,谢谢。

Javascript 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
前端性能优化建议
Sep 17 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 #Javascript
javascript实现简单的全选和反选功能
Jan 05 #Javascript
Javascript原型链的原理详解
Jan 05 #Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 #Javascript
基于javascript实现图片懒加载
Jan 05 #Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 #Javascript
基于javascript实现图片预加载
Jan 05 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python文本数据处理学习笔记详解
2019/06/17 Python
用python做游戏的细节详解
2019/06/25 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Django跨域请求原理及实现代码
2020/11/14 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang