用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寫計算器