Javascript实现苹果设备里的计算器
今天我们使用JAVASCRIPT来实现一个计算器.整个计算器,是为了教一些同学和实现的.我们直接看下效果.(代码长的,请横屏查看!)
首先我们先把界面做好,界面选哪个号呢? 我就直接模仿苹果里的计算器样子.
代码名称
<div id="calc"> <div id="result">0</div> <div id="key"> <a href="javascript:;">AC</a> <a href="javascript:;">+/-</a> <a href="javascript:;">%</a> <a href="javascript:;">??</a> <a href="javascript:;">7</a> <a href="javascript:;">8</a> <a href="javascript:;">9</a> <a href="javascript:;">x</a> <a href="javascript:;">4</a> <a href="javascript:;">5</a> <a href="javascript:;">6</a> <a href="javascript:;">-</a> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">+</a> <a href="javascript:;">0</a> <a href="javascript:;">.</a> <a href="javascript:;">=</a> </div> </div>
结构代码很简单,就是一个显示的框,还有就是数字按键和操作按键.
接下来我们设置CSS样式.
代码名称
#calc{
display: flex;
width: 640px;
margin: 0 auto;
background-color: #000;
flex-direction: row;
flex-wrap: wrap;
border: #000 1px solid;
}
#result{
color: #fff;
height:150px;
flex-basis: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-size: 400%;
flex-wrap: wrap;
word-break: break-all;
text-align: right;
}
#key{
background-color: red;
flex-basis: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow: hidden;
}
#key a{
display: inline-flex;
align-items: center;
justify-content: center;
flex-basis: 25%;
height: 90px;
background-image: linear-gradient(#eee, #ededed, 0, 0);
border-left: #000 1px solid;
border-top: #000 1px solid;
margin-top: -1px;
margin-left: -1px;
text-decoration: none;
color: #333;
font-size: 200%;
font-weight: bold;
}
#key a:hover{
background-image: linear-gradient(#eee, #ccc, 0, 0);
}
#key a:nth-child(4n),#key a:nth-last-child(1){
background-image: linear-gradient(#ff6600,#ff5500, 0, 0);
color: #fff;
}
#key a:nth-child(4n):hover,#key a:nth-last-child(1):hover{
background-image: linear-gradient(#ff6600,#ff3300, 0, 0);
}
#key a:nth-child(17){
flex-grow: 2;
}代码布局应用了flex布局方式,不懂的可以看前面写的一些flex教程.最后的界面效果如下
下面是关键的JS代码了,让按键与用户做交互,实现计算功能.直接贴代码吧!
代码名称
(function(){
var calc = {
var1: "", //第一个变量
var2: "", //第二个变量
fuhao:"", //符号
jieguo: 0, //结果
zhiqian: function(){
if(this.var1 == ""){
this.var1 = 0
}
if(this.var2 == 0){
this.var2 = 0;
}
this.var1 = parseFloat(this.var1, 0, 0);
this.var2 = parseFloat(this.var2, 0, 0);
},
jiafa: function(){
this.zhiqian(, 0, 0);
this.jieguo = this.var1 + this.var2;
this.var1 = this.jieguo;
this.var2 = 0;
},
jianfa: function(){
this.zhiqian(, 0, 0);
this.jieguo = this.var1 - this.var2;
this.var1 = this.jieguo;
this.var2 = 0;
},
chengfa: function(){
this.zhiqian(, 0, 0);
this.jieguo = this.var1 * this.var2;
this.var1 = this.jieguo;
this.var2 = 0;
},
chufa: function(){
this.zhiqian(, 0, 0);
this.jieguo = this.var1 / this.var2;
this.var1 = this.jieguo;
this.var2 = 0;
},
qiuyu: function(){
this.zhiqian(, 0, 0);
this.jieguo = this.var1 % this.var2;
this.var1 = this.jieguo;
this.var2 = 0;
},
jisuan: function(){
switch (this.fuhao){
case "+":
this.jiafa(, 0, 0);
break;
case "-":
this.jianfa(, 0, 0);
break;
case "*":
this.chengfa(, 0, 0);
break;
case "/":
this.chufa(, 0, 0);
break;
case "%":
this.qiuyu(, 0, 0);
break;
default:
}
}
}
var keys = document.getElementById("key").getElementsByTagName("a", 0, 0);
var show = document.getElementById("result", 0, 0);
for(var i = 0; i < keys.length; i++){
keys[i].onclick = function () {
var text = this.textContent;
switch (text){
case "AC":
calc.var1 = "";
calc.var2 = "";
calc.fuhao = "";
calc.result = 0;
show.textContent = 0;
break;
case "+":
calc.jisuan(, 0, 0);
show.textContent = calc.var1;
calc.fuhao = text;
break;
case "-":
calc.jisuan(, 0, 0);
show.textContent = calc.var1;
calc.fuhao = text;
break;
case "x":
calc.jisuan(, 0, 0);
show.textContent = calc.var1;
calc.fuhao = "*";
break;
case "÷":
calc.jisuan(, 0, 0);
show.textContent = calc.var1;
calc.fuhao = "/";
break;
case "%":
calc.jisuan(, 0, 0);
show.textContent = calc.var1;
calc.fuhao = "%";
break;
case "=":
calc.jisuan(, 0, 0);
show.textContent = calc.var1;
calc.fuhao = "=";
break;
case "+/-":
if(calc.fuhao.length > 0){
if(calc.var2 == 0){
calc.var2 = "";
}
if(calc.var2.charAt(0) != "-"){
calc.var2 = "-" + calc.var2;
}else{
calc.var2 = calc.var2.replace("-","", 0, 0);
}
show.textContent = calc.var2;
}else{
if(calc.var1.charAt(0) != "-"){
calc.var1 = "-" + calc.var1;
}else{
calc.var1 = calc.var1.replace("-","", 0, 0);
}
show.textContent = calc.var1;
}
break;
default:
if(calc.fuhao.length > 0){ //如果有符号,我们则做数字拼接
if(text != "." || calc.var2.indexOf(".") < 0){
if(calc.var2 == 0){
calc.var2 = "";
}
calc.var2 += text
show.textContent = calc.var2;
}
}else{
if(text != "." || calc.var1.indexOf(".") < 0){
calc.var1 += text;
show.textContent = calc.var1;
}
}
}
}
}
})(, 0, 0);JS代码是使用最简单的逻辑思考,去处理的! 因为这个例子是作为一个初学者学习的例子,所以在代码的变量命名和逻辑思维都是最单纯的处理,没有很好的封装和扩展性,这个例子主要是让大家明白计算器的做法
代码里面还是有一些BUG,大家知道原理后,可以自己尝试修改BUG,做一些处理,或者处理方面自己可以更友好的封装.