用js编写的简单的计算器代码程序


Posted in Javascript onAugust 04, 2015

最近编写的一个简单的计算器代码程序,先给大家展示一下

用js编写的简单的计算器代码程序

分享代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
 #box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}
 .d_num{display: inline-block; margin: 10px; width: 33px; height: 30px; border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}
 .sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}
 #sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
 #process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
</style>
</head> 
<body> 
 <div id="box">
 <div class="sum">
  <input type="text" name="process" id="process" value="0" />
 </div>
 <div class="sum">
  SUM:<input type="text" name="sum" id="sum" value="0" />
 </div>
 <div>
  <span data-num="1" class="d_num">1</span>
  <span data-num="2" class="d_num">2</span>
  <span data-num="3" class="d_num">3</span>
  <span data-num="<-" class="d_num"><-</span>
  <span data-num="C" class="d_num">C</span>
 </div>
 <div>
  <span data-num="4" class="d_num">4</span>
  <span data-num="5" class="d_num">5</span>
  <span data-num="6" class="d_num">6</span>
  <span data-num="*" class="d_num">*</span>
  <span data-num="/" class="d_num">/</span>
 </div>
 <div>
  <span data-num="7" class="d_num">7</span>
  <span data-num="8" class="d_num">8</span>
  <span data-num="9" class="d_num">9</span>
  <span data-num="+" class="d_num">+</span>
  <span data-num="-" class="d_num">-</span>
 </div>
 <div>
  <span data-num="0" class="d_num">0</span>
  <span data-num="00" class="d_num">00</span>
  <span data-num="." class="d_num">.</span>
  <span data-num="%" class="d_num">%</span>
  <span data-num="=" class="d_num">=</span>
 </div>
 </div>
 <script type="text/javascript">
 var $box = document.getElementById('box');
 var $sum = document.getElementById('sum');
 var $process = document.getElementById('process');
 var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
 $box.onclick = function(e){
 var event = window.event || e;
 var ele = event.srcElement || event.target;
 var _className = ele.className;
 if(_className == 'd_num'){
  var num = ele.getAttribute('data-num');//点击的按钮对应的值
  var NotNum = isNaN(num);
  if(!NotNum || num == '.'){ //点击了数字
  if(!statu){ //还没点击过符号
   if(num1 == '0'){
   num1 = '';
   }
   num1 += num;
   process = num1;
  }else{ //已经点击过符号
   if(num2 == '0'){
   num2 = '';
   }
   num2 += num;
   process = num1 + temp + num2;
  }
  $process.value = process;
  }
  else{ //点击了符号
  if(num1 == ''){//非法操作
   return false;
  }
  if(num == 'C'){//归零
   num1 = '';
   num2 = '';
   process = '';
   temp = '';
   sum = '';
   $process.value = '0';
   $sum.value = '0';
   statu = false;
   return false;
  }
  if(num == '<-'){//退档
   if(sum != ''){
   return false;
   }
   if(num2 == ''){
;   num1 = num1.substring(0,num1.length-1);
   if(num1 == ''){
    num1 = '0';
   }
   process = num1;
   $process.value = process;
   }else{
   num2 = num2.substring(0,num2.length-1);
   if(num2 == ''){
    num2 = '0';
   }
   process = num1 + temp + num2;
   $process.value = process;
   }
   return false;
  }
  if(num2 != ''){//a&b
   if(num == '='){//元操作到此结束
   $process.value = process;
   }else{
   $process.value = process + num;
   }
   switch(temp){//元操作继续
   case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   }
  }else{//a&?
   if(num == '='){
   return false;
   }
   $process.value = process + num;
   process = '';
  }
  if(num == '='){
   sum = '';
   statu = false;
   return false;
  }
  temp = num;//记录操作符
  statu = true;//已经触发操作状态
  }
 }
 };
 </script>
</div> 
</body> 
</html>

现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算。如果发生被除数为零的错误,下面会给出提示,就像这样:

用js编写的简单的计算器代码程序

这就是我设计的一个小程序,还有许多改进的地方,比如界面的美化,会再接再厉。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Vue组件实现触底判断
Jun 26 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 #Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 #Javascript
JavaScript运动减速效果实例分析
Aug 04 #Javascript
JavaScript仿静态分页实现方法
Aug 04 #Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 #Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 #Javascript
JavaScript数组各种常见用法实例分析
Aug 04 #Javascript
You might like
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php页面缓存方法小结
2015/01/10 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jquery实现图片预加载
2015/12/25 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
浅谈javascript错误处理
2019/08/11 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python三方库之requests的快速上手
2019/03/04 Python
python3.5安装python3-tk详解
2019/04/26 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python else语句在循环中的运用详解
2020/07/06 Python
python判断元素是否存在的实例方法
2020/09/24 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
Eclipse面试题
2014/03/22 面试题
护理自我鉴定范文
2013/10/06 职场文书
体育教师工作总结的自我评价
2013/10/10 职场文书
教师业务学习制度
2014/01/25 职场文书
电工工作职责范本
2014/02/22 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
节能减排倡议书
2014/04/15 职场文书
市场调查策划方案
2014/06/10 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年暑假工作总结
2015/07/13 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python