脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 计算器

javascript-简单的计算器实现步骤分解(附图)

 更新时间：2013年05月30日 15:48:39   投稿：whsnow  
输入内容的判断，对于事件对象的来源的判断以及数学运算“+，-，*，/”的使用，感兴趣的朋友可以学习下

知识点：
　　1、数学运算“+，-，*，/”的使用
　　2、输入内容的判断，对于事件对象的来源的判断
效果：
 
代码：

复制代码 代码如下:

<style>
#calculate {
line-height: 60px;
text-align: center;
background: #ccc;
font-size: 16px;
font-weight: bold;
}
#calculate tbody input{
width: 100%;
height: 60px;
background:#033;
color: #fff;
font: bold 16px/1em 'Microsoft yahei';
}
#calculate tbody td{
width: 25%;
background: #fff;
}
#calculate_outPut{
font-size: 20px;
letter-spacing:2px;
background:#fff;
height: 40px;
border: none;
text-align: right;
width: 100%;
}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
<thead >
<tr>
<td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
</tr>
</thead>
<tbody id="calculate_num">
<tr>
<td><label>
<input type="button" name="button" id="button" value="7" _type='num' />
</label></td>
<td><input type="button" value="8" _type='num' /></td>
<td><input type="button" value="9" _type='num' /></td>
<td><input type="button" value="/" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="4" _type='num' /></td>
<td><input type="button" value="5" _type='num' /></td>
<td><input type="button" value="6" _type='num' /></td>
<td><input type="button" value="*" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="1" _type='num' /></td>
<td><input type="button" value="2" _type='num' /></td>
<td><input type="button" value="3" _type='num' /></td>
<td><input type="button" value="-" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="0" _type='num' /></td>
<td><input type="button" value="+/-" _type='+/-' /></td>
<td><input type="button" value="." _type='.' /></td>
<td><input type="button" value="+" _type='op' /></td>
</tr>
<tr>
<td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
<td><input type="button" value="C" _type='cls' /></td>
<td><input type="button" value="=" _type='eval' /></td>
</tr>
</tbody>
</table>
<script>
//计算对象
var operateExp={
'+':function(num1,num2){return num1+num2;},
'-':function(num1,num2){return num1-num2;},
'*':function(num1,num2){return num1*num2;},
'/':function(num1,num2){return num2===0?0:num1/num2;}
}
//计算函数
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保证num1,num2都为数字
num1=Number(num1);
num2=Number(num2);
//不存在操作符,返回num1;
if(!op)return num1;
//匹配运算公式
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}
//显示面板
var calculate_outPut=document.getElementById("calculate_outPut");
//操作面板
var calculate_num=document.getElementById("calculate_num");
var result=0;//计算结果
var isReset=false;//是否重新设置
var operation;//操作符
//设置显示屏的值
function setScreen(num){
calculate_outPut.value=num;
}
//获取显示屏的值
function getScreen(){
return calculate_outPut.value;
}
//添加点击事件
calculate_num.onclick=function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.type=="button"){
var mark=target.getAttribute("_type");//获取当前点击button的自定义的属性。
var value=target.value;//获取当前的值
var num=getScreen();//获取当前框的值
if(mark==='bs'){//退格键
if(num==0)return;
var snum=Math.abs(num).toString();
if(snum.length<2)
setScreen(0);
else
setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//数字键
if(num==='0'||isReset){//有操作符或显示屏为0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小数点
var hasPoint=num.toString().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="+/-"){//正负号
setScreen(-num);
}
if(mark==="op"){//如果点击的是操作符则设计第一个操作数
if(isReset)return;
isReset=true;
if(!operation){
result=+num;
operation=value;
return;
}
result=operateNum(result,num,operation);
setScreen(result);
operation=value;
}
if(mark==="cls"){//清零
result=0;
setScreen(result);
isReset=false;
}
if(mark==="eval"){//计算
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}
</script>
View Code

详细分解：
第一：分支计算部分没有使用switch 语句，使用了名值对的形式。
复制代码 代码如下:

//计算对象
var operateExp={
'+':function(num1,num2){return num1+num2;},
'-':function(num1,num2){return num1-num2;},
'*':function(num1,num2){return num1*num2;},
'/':function(num1,num2){return num2===0?0:num1/num2;}
}

第二：对象事件的属性的使用，获取点击对象的类型。利用事件冒泡，捕获事件，并对事件进行分类处理。
复制代码 代码如下:

calculate_num.onclick=function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.type=="button"){
var mark=target.getAttribute("_type");//获取当前点击button的自定义的属性。
var value=target.value;//获取当前的值
var num=getScreen();//获取当前框的值
if(mark==='bs'){//退格键
if(num==0)return;
var snum=Math.abs(num).toString();
if(snum.length<2)
setScreen(0);
else
setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//数字键
if(num==='0'||isReset){//有操作符或显示屏为0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小数点
var hasPoint=num.toString().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="+/-"){//正负号
setScreen(-num);
}
if(mark==="op"){//如果点击的是操作符则设计第一个操作数
if(isReset)return;
isReset=true;
if(!operation){
result=+num;
operation=value;
return;
}
result=operateNum(result,num,operation);
setScreen(result);
operation=value;
}
if(mark==="cls"){//清零
result=0;
setScreen(result);
isReset=false;
}
if(mark==="eval"){//计算
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}

第三：全局变量的使用，利用全局变量对局部操作进度进行控制。（状态控制）　
复制代码 代码如下:

var result=0;//计算结果
var isReset=false;//是否重新设置
var operation;//操作符

第四：对页面操作进行分离，解耦合。
复制代码 代码如下:

//设置显示屏的值
function setScreen(num){
calculate_outPut.value=num;
}
//获取显示屏的值
function getScreen(){
return calculate_outPut.value;
}

第五：过滤操作数，完成计算。
复制代码 代码如下:

//计算函数
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保证num1,num2都为数字
num1=Number(num1);
num2=Number(num2);
//不存在操作符,返回num1;
if(!op)return num1;
//匹配运算公式
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}

PS：这里再为大家推荐两款本站的在线计算器，都是采用js实现，且功能强大，相信对于大家深入了解JavaScript数学运算及web设计会有所帮助：

在线标准计算器：http://tools.jb51.net/jisuanqi/jsq

在线科学计算器：http://tools.jb51.net/jisuanqi/jsqkexue

您可能感兴趣的文章:

相关文章

  • 原生js编写贪吃蛇小游戏

    原生js编写贪吃蛇小游戏

    这篇文章主要为大家详细介绍了原生js编写贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JavaScript实现获取img的原始尺寸的方法详解

    JavaScript实现获取img的原始尺寸的方法详解

    在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置，本文就来分享一下JavaScript实现获取img的原始尺寸的方法吧
    2023-03-03
  • bootstrap学习笔记之初识bootstrap

    bootstrap学习笔记之初识bootstrap

    Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
    2016-06-06
  • JavaScript 中创建私有成员

    JavaScript 中创建私有成员

    这篇文章主要介绍了JavaScript 中创建私有成员，下面介绍以 # 作为前缀几种在 JavaScript 代码中实现私有属性和方法的方式，需要的小伙伴可以参考一下
    2021-12-12
  • 详解ES6 中的Object.assign()的用法实例代码

    详解ES6 中的Object.assign()的用法实例代码

    这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)

    js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)

    这段代码是从网上看到的一段不错的代码，用for命令实现字符串的转移，而且使用的是for循环直接将后面的字符替换成前面的字符，这个逻辑以前没试过
    2020-12-12
  • JavaScript onclick点击事件-点击切换图片且自动播放

    JavaScript onclick点击事件-点击切换图片且自动播放

    这篇文章主要介绍了JavaScript onclick点击事件-点击切换图片且自动播放，在页面中放图片并设置四个button，可以通过点击上一张下一张来切换图片，下面来看看具体的实现过程吧
    2022-01-01
  • js获取系统的根路径实现介绍

    js获取系统的根路径实现介绍

    js如何获取系统的根路径，在本文给出了详细的方法，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-09-09
  • 一道关于JavaScript变量作用域的面试题

    一道关于JavaScript变量作用域的面试题

    这篇文章主要为大家介绍了一道关于JavaScript变量作用域的面试题，如何解决这道面试题，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jfinal与bootstrap的登录跳转实战演习

    jfinal与bootstrap的登录跳转实战演习

    这篇文章给大家分享jfinal与bootstrap之间的登录跳转，具体内容包含有点击登录弹出模态框、点击登录确认按钮后的validate、jfinal的validate、jfinal的session管理、ajax请求与返回信息处理、页面间智能跳转。感兴趣的朋友跟着小编一起看看吧
    2015-09-09

最新评论