首页 > 代码库 > 用javascript写计算器

用javascript写计算器

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

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

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

<button value="http://www.mamicode.com/7" >7</button>

 

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

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

技术分享
<style>

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

</style>

<button value="http://www.mamicode.com/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="http://www.mamicode.com/7" class="short" onclick="num(this.value)">7</button>

然后写一个num函数

技术分享
<script>
function num(a){
  var pingmu=document.getElementById("pingmu")  //获得屏幕对象
  pingmu.value=http://www.mamicode.com/a;     //把按钮的值输出出来>
技术分享

 

虽然屏幕可以成功显示每个按钮按下后的值,但是如果想要按出大于一位的数字比如六十四(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=http://www.mamicode.com/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=http://www.mamicode.com/xianshi;}"";} } function sum(){ //计算结果函数 if(jisuan=="")renturn0; //首个按钮不能为= var pingmu=document.getElementById("pingmu"); total=eval(jisuan) pingmu.value=http://www.mamicode.com/total;"";xianshi=""; } </script> <button valuehttp://www.mamicode.com/="=" 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=http://www.mamicode.com/xianshi;jisuan+=a;huanchun="";}
  else{pingmu.value=http://www.mamicode.com/a;xianshi="";jisuan=jisuan+huanchun+a;huanchun="";}
}

function sum(){
  if(jisuan=="")renturn0;
  document.getElementById("pingmu");
  total=eval(jisuan)
  pingmu.value=http://www.mamicode.com/total;"";xianshi="";huanchun=total;
}
</script>
技术分享

大功告成

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

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

HTML:

<button value="http://www.mamicode.com/c" class="short" onclick="ccc()">C</button>

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

 

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

技术分享
function ten(){
  var total=0,pows=0
  var pingmu=document.getElementById("pingmu");
  var value=http://www.mamicode.com/pingmu.value;"");
  arr=arr.reverse();
  for(i=0;i<arr.length;i++){
  arr[i]-=0;
  pows=Math.pow(2,i);
  total+=arr[i]*pows;
  }
  pingmu.value=http://www.mamicode.com/total;"";xianshi="";
}

function two(){
  var pingmu=document.getElementById("pingmu");
  var value=http://www.mamicode.com/pingmu.value;"");
  pingmu.value=http://www.mamicode.com/str;"";jisuan="";
}
技术分享
<button value="http://www.mamicode.com/x" class="short" onclick="ten()">ten</button>
<button value="http://www.mamicode.com/x" class="short" onclick="two()">two</button>

 

 最终效果如下:















 

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

用javascript写计算器