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