计算机开发前端,前端开发实战：实现一个网页计算机。

前言

作为一名前端初级开发，我需要一些小项目进行实战训练，才能了解自己是否真正的掌握了前端开发技术。

下面就来实现一个网页计算机的功能。

需求：1)网页界面有0-9十个数字按钮。

2)计算器可以实现加、减、乘、除四种运算。

3)计算机界面显示在网页中间，计算结果显示在上面。

4)计算机需要有复位功能键。

这里实现了功能界面和主要的实现功能逻辑，主要在功能实现上还有些需要解决，最关键的就是对JavaScript操作Dom文档树的Api不是很了解，导致功能实现上会有卡顿。

1)JavaScript如何更改Dom文档的显示值\和获取显示值？

2)JavaScript如何给标签设置点击事件？

刚开始开发的时候还会遇到一个问题，就是在使用下面代码获取Dom文档的标签的时候，总是获取不到标签。

var actionResult = document.getElementById("action_result");

console.log(actionResult); //这里打印的是nul.

后来百度到是因为标签的位置有关，因为我们的JavaScript代码是放在header标签的，而网页标签是在body标签的，加载顺序靠后导致没有加载网页标签的情况下加载了js代码，所以获取为null。

解决上面的方法就是把js代码放在body标签之后执行，这样获取到的标签对象就不会是null 。

但是用浏览器进行调试还是报下面的异常，并不影响程序运行。

Unchecked runtime.lastError: The message port closed before a response was received.

写了程序界面布局之后，我们接下来就开始实现功能逻辑代码。

/**思路步骤:

*1)显示的数字和计算的数字需要分开定义变量，只有计算结果的时候，显示的数字才会等于计算的数值。

* 2)每个按钮的功能都不一样，表示数值进行的元算的方式也不一样。

* 3)显示的数字需要定义两个变量定义，一个变量表示数字显示的次数。

* 4)显示的两次数字最后需要使用计算方法计算得到结果。

* 5)如果没有复位键，那么计算完成之后，显示结果值之后，需要清空第一次录入和第二次录入的值，重新进行录入可以继续进行运算。

* 6) 点击功能键说明用户完成了对上一次录入的操作，应该给上一次录入赋值，并开始下一次数值录入。

* 7)如果用户结束两次录入之后没有计算结果，而是继续按下计算功能键，需要先计算上一次计算结果，然后使用上一次的计算结果开始下一次计算。

*/

之前以为实现这个计算器会比较难，因为需要考虑各种情况。但是每次都是这样，刚开始时觉得很难，但是多花一点时间去想一想，想好动手开始去做，就会发现一切都是想象放大了难度。

万事开头难，开始了就会想办法解决遇到的问题，靠百度就可以解决所有遇到的问题，有了这种心态之后，一切难题也就不是难题了。

这个计算器实现不是很难，但是优化起来就比较复杂。比如我们现在想让输入的数值和运算都显示在界面上，这样用户就可以知道自己输入的是什么，目前正在进行什么运算。

实现思路：

1)输入的所有数值包括等于号都需要显示到界面上。

2)输入的数值需要记录第一次输入的数值，还有第二次的数值。

3)数值首先可以根据每次按下的按钮进行录入，当点击运算符时，就拿到第一次录入的结果和运算符进行拼接。

4)然后用户进行第二次录入时，我们需要使用第一次录入的值和运算符再次拼接第二次录入的结果值。

5)当我们再次点击功能键的时候需要把结果计算出来，这个时候上面的结果和下面的运算结果是一致的。

6)当我们点击等于的时候，需要把等于号添加显示出来，然后后面显示结果。

最后计算器的完整代码如下:

Web计算机

7

8

9

+

4

5

6

-

1

2

3

*

0

.

=

/

AC