用javascript写计算器

Posted 2020-09-21 叶常绿

本人新手，如果有什么不足的地方，希望可以得到指点

今天尝试用javascript写一个计算器

首先把计算器的按钮做出来，用button做好了，这样可以不用设置太多的样式

<button value="7" >7</button>

 

按照上面把0-9数字的按钮都搞出来 当然还有+-*/=%这些按钮

顺便给每个按钮添加样式 如下:

<style>

  .short{height:63px;width:55px;float:left;}

</style>

<button value="7" class="short">7</button>

在按钮顶部添加一个屏幕用input的text来做：

<input type="text" id="pingmu" style="height:36px;width:276px;"/><br/>

 

然后下面的方式进行排版

<-屏幕->

7 8 9  * /

4 5 6 -  %

1 2 3 + =

 

显示的效果如下

 

 

基本上样式上就简单的完成了，现在来解决脚本的问题

为了思路不混淆，先来实现按钮的输出，不考虑计算方面的问题

可以利用每个按钮自带的value属性来获取其值如下：

<button value="7" class="short" onclick="num(this.value)">7</button>

然后写一个num函数

<script>
function num(a){
  var pingmu=document.getElementById("pingmu")  //获得屏幕对象
  pingmu.value=a;     //把按钮的值输出出来
}
</script>

 

虽然屏幕可以成功显示每个按钮按下后的值，但是如果想要按出大于一位的数字比如六十四（64）的时候，你会发现

只能分别按出6 和 4，而按不出64，因此需要添加一个变量用于临时保存显示的值，这个变量就用xianshi来命名好了

每次按下按钮，xianshi变量就会保存按下的值，最后在输出

 

当然如果你连续按下数字后 再按运算符号时，符号也会被保存，

因此需要判断按钮的值是数字还是符号

如果是数字xianshi变量就保存其值

如果是符号那么只输出符号，并且清空xianshi变量的值

因为如果不清空，按完符号再按数字时，数字就会把以前的值显示出来 比如：按12 + 6

按完后因为前面的值没清空 所以会显示:126的结果

<script>
var xianshi="";
function num(a){
  var pingmu=document.getElementById("pingmu");
   if(!isNaN(a)){                  //判断是否是数字
     xianshi+=a;
     pingmu.value=xianshi;
    }
    else{pingmu.value=a;xianshi="";}
}
</script>

然后实现计算功能

思路：声明一个变量jisuan用于保存jisuan的值，然后用eval函数将字符串转变为代码。

当然jisuan的第一个字符不能是符号，因此需要判断第一个按钮是否为符号，代码如下

<script>
var jisuan="";
var xianshi="";
function num(a){
  if(jisuan==""&&isNaN(a))return 0;   //首次输入值不能为符号
  jisuan+=a;
  var pingmu=document.getElementById("pingmu");
  if(!isNaN(a)){xianshi+=a;pingmu.value=xianshi;}
  else{pingmu.value=a;xianshi="";}
}

function sum(){                        //计算结果函数
  if(jisuan=="")renturn0;              //首个按钮不能为=
  var pingmu=document.getElementById("pingmu");
  total=eval(jisuan)
  pingmu.value=total;
  jisuan="";xianshi="";
}
</script>
<button value="=" class="sum()" onclick="sum()">=</button>

 下面实现缓存功能

 计算部分就初步完成了，但是缺少了些功能，比如算完3+3得出的结果6，这时希望用6的值继续下次计算时就实现不了

因此需要添加缓存功能，对上面的代码进一步修改

<script>
var xianshi="";
var jisuan="";
var huanchun="";    

function num(a){
  if(jisuan==""&&huanchun==""&&isNaN(a))return 0; 
  var pingmu=document.getElementById("pingmu");
  if(!isNaN(a)){xianshi+=a;pingmu.value=xianshi;jisuan+=a;huanchun="";}
  else{pingmu.value=a;xianshi="";jisuan=jisuan+huanchun+a;huanchun="";}
}

function sum(){
  if(jisuan=="")renturn0;
  document.getElementById("pingmu");
  total=eval(jisuan)
  pingmu.value=total;
  jisuan="";xianshi="";huanchun=total;
}
</script>

大功告成

不过没有删除键，所以再写个删除键吧，这个函数只需要把所有变量的值清空就完成了

function ccc(){
  jisuan="";xianshi="";huanchun="";
  document.getElementById("pingmu").value="";
}

html：

<button value="c" class="short" onclick="ccc()">C</button>

这里函数名不可以用clear，因为会出错，至于为什么我也不知道，可能侵犯了关键字的权益

 

感觉要是再加点二进制与十进制的转换就更完美了

function ten(){
  var total=0,pows=0
  var pingmu=document.getElementById("pingmu");
  var value=pingmu.value;
  var arr=value.split("");
  arr=arr.reverse();
  for(i=0;i<arr.length;i++){
  arr[i]-=0;
  pows=Math.pow(2,i);
  total+=arr[i]*pows;
  }
  pingmu.value=total;
  jisuan="";xianshi="";
}

function two(){
  var pingmu=document.getElementById("pingmu");
  var value=pingmu.value;
  value-=0;
  var arr=new Array();
  for(i=0;1;i++){
  if(value==0)break;
  arr[i]=value%2;
  value/=2;
  value=parseInt(value);
  }
  arr=arr.reverse();
  str=arr.join("");
  pingmu.value=str;
  xianshi="";jisuan="";
}

<button value="x" class="short" onclick="ten()">ten</button>
<button value="x" class="short" onclick="two()">two</button>

 

 最终效果如下：

 

博文中不允许有javascript代码所以具体的效果就法显示啦