您现在的位置: 365建站网 > 365学习 > 用JS写的简单的计算器

用JS写的简单的计算器

文章来源:365jz.com     点击数:998    更新时间:2009-09-13 10:48   参与评论

 

参加某公司的面试后,有一机试题目:用web技术开发一个B/S结构的公式解析器。于是想了想思路,神来一笔想先写个计算器程序做基础,于是便写了这个程序。


2009-08-21_195533  2009-08-21_195501


  1.本页效果图片                                        2.美化后的效果




<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<script>
Array.prototype.remove=function(index)
{
  if(isNaN(index)||index>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
      if(this[i]!=this[index])
      {
          this[n++]=this[i]
      }
  }
  this.length-=1
}

function commonMath(){
 //类初始化
 this.init = function(){
  this.tmp = '';
  this.debug = 0;
  this.output = '';
  this.method = '';
  this.sign = 1;//0:-;1:+
  this.register = Array();//寄存器
 }
 //设置报错信息
 this.showmsg = function(msg){
  if(this.debug == 1) alert(msg);
 }
 //设置运算符
 this.setMethod = function(_method){
  this.method = _method;
  _length = this.register.length;
  if(_length == 0){
   if(this.tmp == '') return;
   this.register[0] = this.tmp;
   this.register[1] = _method;
   this.tmp = '';
   return;
  }
  if(_length = 2 || this.tmp == ''){
   this.register[1] = _method;
  }
  if(_length == 2 && this.tmp != ''){
   this.register[2] = this.tmp;
   this.run(1);
  }
  if(_length == 3) this.run(1);
 }
 //设置显示值
 this.setValue = function(_value){
  var tmp = parseInt(eval(this.tmp+'+"'+_value+'"'));
  max = /^-?\d{1,9}$/i;
  if( max.test(tmp) == false){
   return;
  }
  this.tmp = tmp;
  this.output.value = this.tmp;
 }
 //设置符号
 this.setSign = function(){
  var del = 0;
  var sign = Array('-','+');
  this.sign = this.sign ^ 1;
  _sign = sign[this.sign];
  if(/\d/i.test(this.tmp)== false && this.register.length > 0){
   del = 1;
   this.tmp = this.register[0];
  }
  if(_sign == '-'){
    this.tmp = -this.tmp;
  }else{
    this.tmp = Math.abs(this.tmp);
  }
  this.output.value = this.tmp;
  if(del == 1){
    this.register[0] = this.tmp;
    this.tmp = '';
  }
 }
 //获取按键
 this.getValue = function(input){
  var _in = input;
  var inputList = document.getElementsByTagName("input");
  this.output = inputList[0];
  regMethod = /^[\+|\-|\*|\/]$/i;
  if(regMethod.test(_in)){
   this.setMethod(_in);
   return;
  }
  regNum = /^\d$/i;
  if(regNum.test(_in)){
   this.setValue(_in);
   return;
  }
  regSign = /^\+\/\-$/i;
  if(regSign.test(_in)){
   this.setSign(_in);
   return;
  }
  regResult = /^=$/;
  if(regResult.test(_in)){
   this.run();
   return;
  }
 }
 //计算结果
 this.run = function(type){
  if(this.register.length < 2) return this.showmsg(1);
  if(this.register.length == 2 && (this.tmp == '')) return this.showmsg(2);
  if(this.register.length == 2 && this.tmp != ''){
   this.register[2] = this.tmp;
   this.run();
  }
  
  this.showmsg(this.register.join(' '));
  var _exp = parseInt(eval(this.register.join(' ')));
  this.output.value = _exp;
  for(i=0;i<3;i++){
   this.register.remove(i);
  }
  this.register[0] = _exp;
  this.tmp = '';
  if(type) this.register[1] = this.method;
  return;
 }
}
 var commonMath = new commonMath();
 commonMath.init();
</script>
<style>
#main{
width:100%;
height:100%;
}
#inputs{
position:relative;
top:50%;
left:50%;
}
.inbutton{
width:30px;
}
.outbutton{
width:145px;
text-align:right;
}
.tcenter{
text-align:center;
}
</style
 </head>
 <body>
  <div id="main">
   <div>
   <span class="outbutton tcenter">etongchina@gmail.com</span>
   </div
   <div>
   <span><input id="output" type="text" class="outbutton" maxlength="9" value="." /></span>
   </div>
   <div>
   <span><input type="button" class="inbutton" value="7" onclick="commonMath.getValue(this.value)" /></span>
   <span><input type="button" class="inbutton" value="8" onclick="commonMath.getValue(this.value)" /></span>
   <span><input type="button" class="inbutton" value="9" onclick="commonMath.getValue(this.value)" /></span>
   <span><input type="button" class="inbutton" value="+" onclick="commonMath.getValue(this.value)" /></span>
   </div>
   <div>
   <span><input type="button" class="inbutton" value="4" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="5" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="6" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="-" onclick="commonMath.getValue(this.value);" /></span>
   </div>
   <div>
   <span><input type="button" class="inbutton" value="1" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="2" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="3" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="*" onclick="commonMath.getValue(this.value);" /></span>
   </div>
   <div>
   <span><input type="button" class="inbutton" value="0" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="+/-" onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="." onclick="commonMath.getValue(this.value);" /></span>
   <span><input type="button" class="inbutton" value="/" onclick="commonMath.getValue(this.value);" /></span>
   </div>
   <div>
    <span><input type="button" class="outbutton tcenter" value="计算" onclick="commonMath.getValue('=');"  /></span>
   </div>
  </div>
  </body>
</html>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (998人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------