用javascript写计算器

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

今天尝试用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代码所以具体的效果就法显示啦

巴特西

用javascript写计算器

最新文章

热门文章