一个简单的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 相关文章推荐
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
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
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python变量和数据类型详解
2017/02/15 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python星号*与**用法分析
2018/02/02 Python
python实现图片彩色转化为素描
2019/01/15 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
日语专业推荐信
2013/11/12 职场文书
成人继续教育实施方案
2014/03/01 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
工会工作先进事迹
2014/08/18 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
酒店员工手册范本
2015/05/14 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android