js css html实现计算器

首先先架构出html需要使用的按钮与输入框

 

 然后给按钮与输入框添加样式

效果是这样的,可以自己编写想要的效果:

 

 然后我们给每个button添加一个事件

我们要在输入框里获取到数字的值,就要先获取到input输入框 所以我们现在在script里先选择获取到input输入框,这里我给input取了一个class类名加ipt

这样我们就获取到了input输入框,之前我们给每个button添加了取名为add的事件,现在我们给add事件添加一个函数,让数字可以输入到input输入框里

这里的a是一个形参,目的是把上面按钮的add()括号里的实参传递过来,u1l

上面公式的意思是 输入框的默认值=输入框的默认值+你传过来的参数;也就是你传过来的参数就上输入进了输入框,

接下来我们再给'='的事件添加一个函数,让他可以计算输入框的值

 这里公式的意思是 输入框里的默认值=自动计算输入框里的默认值

eval()的意思是可以自动计算括号里的值,就可以让计算机算出来我们想要的值啦

然后我们还要一个清零键AC,他的目的是清零输入框里的值,所以我们也给他的事件添加一个函数

这里公式的意思是当我们点击到AC键时 输入框的值='';  ''就是空了 啥都没有了,所以我们就达到了清零的效果 

下面是实现简易计算器的全部代码

css样式:

 html内容:

 js代码:

 需要注意我们的乘号是不能被识别的 所以事件里你传的值应该是*号,

以上就是简易计算机的实现过程