用div+css做一个简易的计算器，几行js完成计算功能「217」

终于想做一个计算器了，少少几行j代码而已。网上有很多的h计算器的实例，大多是用来做的，但我还是选择用iv来做。这个计算器有基本的运算功能，但一些细的纠错，就没再细究了，极简嘛。更多文章，请关注我的头条号，我是落笔承冰。

一、开始吧，先做一个360*500的盒子。

二、加入输入框，输入框给它270宽，再配个灰色背景。

三、做18个iv，我觉得这样子比标签更直观，其实你还是什么都看不见，因为字是黑色的，背景黑色的。

四、行了，我们给iv加样式吧。

盒子天生独占一行，我们做一下修改让它摆得整齐些。

五、我们让这18个按钮浮动，它们就不会独占一行了，然后再让它们外部上下左右距离为5x。

整体的样子是有了。

六、把按键做成圆的，里面的字居中，然后再把字变大。

注释占了太多行，后面我就不写这么多了，特别是重复的。

七、把计算器的整体外观也改改。

内部距离20x，再加20x的圆角。

八、“=”和“0”这两个一个是加高，一个是加宽，我们得再加样式区别对待。

按钮变长了，但是却空了一行。

九、我们让等号按钮右浮动就可以了。

十、对按钮再修饰，做两个样式，一个是灰白色，一个是土黄色。

十一、对输入框做个修饰，最终完成界面设计。

十二、我们整个j只用获取一个元素对象，那就是i。

十三、做按钮点击事件，把大多数按钮的点击都写进去，这里我特意用箭头函数，当学习吧。

几乎所有的按钮都调用这个ik函数，唯有“=”号不用。

十四、该是为“=”加函数的时候了，这里用了v()，能把字符串当算式运算出结果。

十五、总结，到此为止，整个计算器就做出来了，大家会发现j部分很简单，因为我们只有一般的加减乘除计算，有更多想法的朋友，自己补充吧。

!DOCTYPEhh=""hh="UTF-8"iD/i000/*背景色*/i:100x/*水平居中*/i:20x/*内部距离*/-i:20x}444:606060:whi/*白色的字*/f:f/*左浮动*/i:5x/*外部距离5x*/-i:50%/*按钮圆角*/i-hih:60x/*垂直居中*/x-i:/*水平居中*/:i/*鼠标在上时为小手形*/f-iz:28x/*字体大小*/f-fi:Ai/*字体*/}.h{hih:130xi-hih:130x/*垂直居中*/-i:60x/*宽高不一样，不能用百分比，改成像素的圆角*/f:ih}.w{wih:130x-i:60x}.w{k:444:i")vik=()={if(==''){i.v=""}i.v=i.v+}//如果为空，则清空输入框i，如果不为空，则累加到输入框v=()={i.v=v(i.v)}/i//h

JavaScript制作计算器——前端/vue/h5/js

其实我一直都想做一个计算器；用自己的东西来耍：是不是慢慢的成就感啊？

对于大佬们来说我写的可能就比较垃圾了；但是我想对于初级的你；应该可以起到借鉴的作用；如果做的不是很好；希望大家多多提出建议哦；

先给大家看看效果吧！

视频加载中...

废话不多说；上代码

h页面代码iv=34iv=34//ivi=34iv-=34=34i=34iv=34iv@ik=39C34=34C/iviv@ik=39+/-34=34+/-/iviv@ik=39%34=34%/iviv@ik=39←34=34←/iviv@ik=39734=347/iviv@ik=39834=348/iviv@ik=39934=349/iviv@ik=39x234=34Xi2/i/iviv@ik=39√34=34√/iviv@ik=39434=344/iviv@ik=39534=345/iviv@ik=39634=346/iviv@ik=39*34=34*/iviv@ik=39/34=34//iviv@ik=39134=341/iviv@ik=39234=342/iviv@ik=39334=343/iviv@ik=39+34=34+/iviv@ik=39-34=34-/iviv@ik=39034=340/iviv@ik=39.34=34./iviv@ik=39=34=34=/iv/iv/ivj逻辑代码C(i){if(i===39){//清空数据hi.i=[]hi.=1hi.iV=fhi.=f//i-i-x-i--ihi.v=0}=[39,39,39,39,39]//i-i-x-iT=.(i_1=i_1===i)//i-i-x-iT_1=.(i_2=i_2===hi.i[1])//判断在删除的时候输入框中是否是0如果是就不在执行了//i-i-x-i--iif(i===39hi.v===0)hi.i=[]//判断输入的数据是否是加减乘除if(hi.===1){//1.此处添加第一个数据if(T)//如果第一个输入的数据是+-*/那么就不执行if(hi.i[0]===fi){hi.i[0]=i}{hi.i[0]=i}=hi.i.ji(39)hi.++}{//这儿添加的是第二个/三个数据if(hi.i.h===2){//这儿是进行数据判断hi.iV=.(i=i===hi.i[1])}if(!T!hi.iV){//判定在第一个数据上对否添加数据//在结算了一次以后对数据判定如果结算的数据不等于零就不能输入数据if(hi.)hi.$.fi(39)hi.i[0]==hi.i[0]+i}if(T){//如果已经有两个数据了也就是说有+-*/了并且下一个是相同的请况下就不进行添加了//i-i-x-iif((hi.i.h===2T_1)hi.i[1]===fi){hi.i[1]=i//i-i-x-i}if(hi.i.h===3T_1){//这儿是判定数组长度是否为3如果没三就不得添加+-*/符号hi.$.fi(39)}{hi.i[1]+=i}=hi.i.ji(39)}{if(hi.i[2]===fi){hi.i[2]=i}{hi.i[2]+=i}=hi.i.ji(39)}}hi.v=hi.=f},//等于E(i){//判断输入的数据是否是加减乘除//=[39,39,39,39]//T=.(i=i===hi.i[1])//T_1=.(i=i==hi.i[2]).(hi.i.h)//判定数组数据是否有三位数if(hi.i.h!==3)hi.$.fi(39)//声明变量//计算if(hi.i[1]===39){=hi.i[0]*1*hi.i[2]*1}if(hi.i[1]===39){=hi.i[0]*1/hi.i[2]*1}if(hi.i[1]===39){=hi.i[0]*1-hi.i[2]*1}if(hi.i[1]===39){=hi.i[0]*1+hi.i[2]*1}if(hi.i[1]===39){=hi.i[0]*1%hi.i[2]*1}hi.v=hi.i=[]//把值保存下来hi.i[0]=hi.=2hi.iV=fhi.=.()},//+/-按钮A(){},//√Pi(){},//删除D(){//i-i-x-i--vRif(!hi.){//将数组转换为字符串R=hi.i.ji(39).(R.h)//删除字符串的最后一个Li=R.(0,R.h-1)//将字符串转换数组hi.i=Li.i(39)//将数据解析后渲染R=hi.i.ji(39)hi.v=R.(hi.i.h)//如果这个数据小于等于2的时候说明*被删除或者if(hi.i.h=2){hi.iV=f}//如果数组被删完了那么需要对数据初始化if(R.h=1){hi.v=0hi.=fhi.=1hi.iV=f}}{//这儿是指计算运行以后得到的数据对其进行删除if(hi.i.h===1){hi.v=0}hi.i=[]hi.v=0hi.=fhi.=1hi.iV=f}}样式代码.{wih:750xhih:100vhi:0k-:fff}}i{i-:160xi-f:10xwih:750xhih:280xk-:fffx-i:ih:i-ih:30x}.xV{ii:fix:0f:10xwih:100%i:fxjif-:fx-w:w.{i:fxii:ivjif-:i-i::fffhih:90xf-iz:32x-i:10xi-ih:20xi-:30xx-hw:008x(212,212,212)k-:fffx-hw:k-:fffk-:fffx-hw:k-:333}}}}

入门｜15分钟用JS做一个简易计算器

前言这个小练手旨在帮助刚上手学习JvSi的同学练习最基本的J知识，大神勿喷哈，由于这个是非常简易的计算器，可以完成的功能有加减乘除和AC（清屏），DEL（退格）等基本运算，所以代码也不复杂，我会先放出代码，然后再讲解我的思路，非常简单，只要你按照我的思路走，15分钟不到我保证你也可以敲出同样的代码，当然主要还是希望可以为入门的同学提供一种解决问题的思路，各位看完后可以自己动手敲一遍哈。

HTML代码部分

HTML这部分非常简单，没什么多说的，整个框架我利用搭建的，需要注意的是，由于计算器屏幕不可输入，我设置为了i。

CSS代码部分

CSS也是简单设定了一下宽高，我是在火狐浏览器上运行的，由于我没使用百分比来设置宽高，在其他浏览器上样式会发生一定程度上的改变，不过不影响功能就是了。

JvSi部分

请先不要直接看这部分代码，先看我的思路讲解再看这部分，你绝对可以轻松理解

思路讲解

请先不要看上面的JS代码，接下来请试着跟着我的思路走，完成这个计算器的功能，我是分成三个部分来解决的，第一部分是将除了AC，DEL这两个键之外的按键值获取到屏幕上，第二部分是计算屏幕上的表达式的值，第三部分是添加AC（清屏），DEL（退格）功能，检查BUG。

第一部分：获取值到屏幕上

我认为解决简单的JS问题大体都可以分三步：

1.获取你想操作的元素；

2.保存你想操作的元素；

3.对元素进行（遍历）操作；

我的第一步目的是将除了AC，DEL这两个键之外的按键值获取到屏幕上，那么我首先得获取按钮元素以及屏幕元素并将它们保存在_x和x变量里：

获取并保存了想操作的元素，接下来就对他们添加操作：

在进行操作的之前请等一下，我们思考一下，_x数组里存放着0,1,2,3,4,5,6,7,8,9，"."，"+"，"-"，"*"，"\"，"="等一系列东西，我们当然要对数字和计算符号进行分开操作，所以我们用If…………来判断一下

OK，我们接下来先考虑用户输入的是数字或者点的情况，首先数字可以连续输入到屏幕里，但是小数点不应该能连续输入到屏幕里，小数点应该只有一个才对，所以我们应该先加一个判断条件：屏幕里是否有小数点存在？如果屏幕里已经有小数点存在，那么我只允许你再输入数字，否则屏幕值不会接收，即是如下代码：

好了，用户输入的是数字或者点的情况已经考虑结束了，现在考虑用户输入的是运算符号的情况！这种情况也分两部分，一种是用户按了等号，一种是按了除等号之外的其他加减乘除运算符号，因为等号比较特殊一点，按了就直接应该得出结果了，所以要区用if…………分开。我这样的思路你可以理解吧！

还有一个事情我们要考虑的是，我希望在我按下加减乘除运算符号时可以清屏，这样我就可以继续键入下一数字了（举例：我按下数字“5”，再按下运算符“+”，按下瞬间屏幕清屏，然后我再键入数字“3”，最后按下“=”，最后得出结果“2”），但是清屏我并不想让我的数据丢失，所以此时我先新建一个数组来保存这些数据（这里的“数据”指数字和运算符，也叫“表达式”），然后再清屏！具体代码如下：

第二部分：计算屏幕上的表达式的值

好了下面我们讨论用户按下等号键的情况，这种比较简单，直接对表达式（表达式就是我们之前输入的数字与符号组合）进行计算就可以啦，需要注意的是计算完成之后要把保存表达式的数组w_清空，因为本次运算完满结束了，如果不清空里面的数据会影响下一次正常计算；

第三部分：添加AC，DEL功能，检查BUG

首先，获取清空按钮和退格按钮，然后把它们保存在_w变量下；

然后就遍历进行添加功能，这里同样需要一个if…………语句来判断用户按的是AC按钮还是DEL按钮

到这里为止，所有功能基本上全部添加完毕，然后我们进行调试，发现一个问题，就是当我们第一次按键就按小数点“.”时，这时用户的本意应为“0.”,意即用户是想输入小数的，但是懒得按“0”，直接按了小数点，所以我们应该加一个判断条件来帮助用户，直接按小数点成为有意义的行为，代码如下：

好了，最后再加上wiw.=fi(){}，代码，到这里就全部结束了；大家有不理解的地方欢迎在评论里问我；

再放一遍JvSi全代码