用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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
javascript定时器完整实例
Feb 10 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
node和vue实现商城用户地址模块
Dec 05 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控制网页过期时间的代码
2008/09/28 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
JS 建立对象的方法
2007/04/21 Javascript
jquery对表单操作2
2011/04/06 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python 生成器需注意的小问题
2020/09/29 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
社会实践感言
2014/01/25 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
学前班评语大全
2014/05/04 职场文书
十佳护士先进事迹
2014/05/08 职场文书
学校教师读书活动总结
2014/07/08 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年仓库工作总结
2015/04/09 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle