如何制作计算器 如何制作计算器网页

前言

这个训练师旨在帮助刚学JavaScript的学生练习最基本的Js知识，大神不喷。因为这是非常简单的计算器，能执行的功能是加法、加法、除法、AC、DEL(退格)等基本运算，所以代码也不复杂。首先解开代码，

HTML代码部分

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

CSS代码部分

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

JavaScript部分

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

思路讲解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再放一遍JavaScript全代码