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

今天嘗試用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寫計算器