今天我们使用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,做一些处理,或者处理方面自己可以更友好的封装.