用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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
详解VUE 数组更新
Dec 16 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
vue实现表格过滤功能
Sep 27 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
dedecms中使用php语句指南
2014/11/13 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
基于Python实现粒子滤波效果
2020/12/01 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
生产部管理制度
2014/01/31 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
消费者理赔投诉书
2015/07/02 职场文书
感恩主题班会教案
2015/08/12 职场文书
丧事答谢词大全
2015/09/30 职场文书
青年教师听课心得体会
2016/01/15 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书