一个简单的jQuery计算器实现了连续计算功能


Posted in Javascript onJuly 21, 2014

一个简单的jQuery计算器,只是实现了一个连续计算的功能

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf8"/> 
<title>Javascript计算器</title> 
</head> 
<body> 
<table> 
<tr> 
<td colspan="4"><input id="show" value="0"/></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="7">7</button></td> 
<td><button onclick="number(this)" value="8">8</button></td> 
<td><button onclick="number(this)" value="9">9</button></td> 
<td><button onclick="calsym(this)" value="+">+</button></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="4">4</button></td> 
<td><button onclick="number(this)" value="5">5</button></td> 
<td><button onclick="number(this)" value="6">6</button></td> 
<td><button onclick="calsym(this)" value="-">-</button></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="1">1</button></td> 
<td><button onclick="number(this)" value="2">2</button></td> 
<td><button onclick="number(this)" value="3">3</button></td> 
<td><button onclick="calsym(this)" value="*">*</button></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="0">0</button></td> 
<td><button onclick="calsym(this)" value="=">=</button></td> 
<td><button onclick="clearCal()" value="c">c</button></td> 
<td><button onclick="calsym(this)" value="/">/</button></td> 
</tr> 
</table> 
</body> 
<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
var num0 = null; 
var num1 = null; 
var symble = null; 
var lastclick = null; 
var symarr = new Array(); //符号集合 
symarr[0] = '+'; 
symarr[1] = '/'; 
symarr[2] = '*'; 
symarr[3] = '-'; 
symarr[4] = '='; 
function number(n){ 
var numnow = $('#show'); 
var _exist=$.inArray(lastclick,symarr); //判断上次点击是否为符号 
if (numnow.val() == 0 || _exist != -1) {//若显示框为0 或者上次点击为符号,则重新记录显示框 
numnow.val($(n).val()); 
}else{ 
numnow.val(parseInt(numnow.val()) * 10 +parseInt($(n).val())); 
} 
lastclick = $(n).val(); // 更新上次点击 
} 

function calsym(cs){ //符号点击事件响应 
var numnow = $('#show'); 
var _exist=$.inArray(lastclick,symarr); 
if (num0 == null && symble == null) { //初始状态 
num0 = numnow.val(); 
symble = $(cs).val(); 
}else if(num0 != null && num1 == null && _exist !=-1){ // 连续点操作符的处理,及第一次点击操作符处理 
symble = $(cs).val(); 
}else{ //正常计算状态 
num1 = numnow.val(); 
var result = calculate(symble,num0,num1); 
symble = $(cs).val(); //上行及本行:先计算之前的运算符及结果,再更新运算符为本次点击 
num0 = result; 
numnow.val(result); 
num1 = null; 
} 
lastclick = $(cs).val(); // 更新上次点击 
} 

function clearCal(){ //清空函数 
$('#show').val('0'); 
num0 = null; 
num1 = null; 
symble = null; 
lastclick = null; 
} 

function calculate(sym,m,n){ //计算并返回结果 
var res = null; 
m = parseInt(m); 
n = parseInt(n); 
switch(sym){ 
case '+': 
res = m+n; 
break; 
case '-': 
res = m-n; 
break; 
case '*': 
res = m*n; 
break; 
case '/': 
if (n == 0) { 
alert("false"); 
break; 
} 
res = m/n; 
break; 
default: 
break; 
} 
return res; 
} 
</script> 
</html>
Javascript 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
JavaScript访问CSS属性的几种方式介绍
Jul 21 #Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 #Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 #Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 #Javascript
jquery显示隐藏input对象
Jul 21 #Javascript
jquery实现保存已选用户
Jul 21 #Javascript
jquery实现显示已选用户
Jul 21 #Javascript
You might like
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python中的__slots__示例详解
2017/07/06 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python实现支付宝转账接口
2019/05/07 Python
Python中生成ndarray实例讲解
2021/02/22 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
办公室文书岗位职责
2013/12/16 职场文书
超市促销活动总结
2014/07/01 职场文书
社区党建工作总结2015
2015/05/13 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Python集合的基础操作
2021/11/01 Python