一)引言
通过使用HTML(超文本链接语言)用于结构化 Web 网页及其内容,CSS(层叠样式表)用于设计风格和布局,JavaScript 编程语言用于在 Web 页面上实现复杂的功能。通过HTML和CSS实现计算器的基本结构,它包括一个文本输入框用于显示计算结果,一组数字和运算符按钮,以及一些JavaScript函数来执行计算和操作。这个计算器可以执行基本的加减乘除运算,以及开平方操作。
二)开发工具与环境使用
开发工具:VSCode
开方语言:HTML,CSS,JS
三)技术实现
1.1,绘制计算器的基本界面
设计一个计算器首先要实现界面的设计,首先通过使用HTML来基本绘制出计算器的数字按键和运算按键,我们可以使用HTML中的form(表单)来定义出一个计算器页面,使用button标签定义出计算器按键并且按键内嵌到表单中。这样一个简单的计算器样式就完成了,但是这时的页面样式不美观且无法实现计算器基本的运算。 通过运行下面这段代码可以得到图一的样式。
1 <div class="main">
2 <form name="form">
3 <input class="textView" name="textView" >
4 </form>
5 <table>
6 <tr>
7 <td><input type="button" class="button" value="C" onclick="Mclean()"></td>
8 <td><input type="button" class="button" value="<" onclick="back()"></td>
9 <td><input type="button" class="button" value="/" onclick="insert('/')"></td>
10 <td><input type="button" class="button" value="x" onclick="insert('*')"></td>
11 </tr>
12 <tr>
13 <td><input type="button" class="button" value="7" onclick="insert(7)"></td>
14 <td><input type="button" class="button" value="8" onclick="insert(8)"></td>
15 <td><input type="button" class="button" value="9" onclick="insert(9)"></td>
16 <td><input type="button" class="button" value="-" onclick="insert('-')"></td>
17 </tr>
18 <tr>
19 <td><input type="button" class="button" value="4" onclick="insert(4)"></td>
20 <td><input type="button" class="button" value="5" onclick="insert(5)"></td>
21 <td><input type="button" class="button" value="6" onclick="insert(6)"></td>
22 <td><input type="button" class="button" value="+" onclick="insert('+')"></td>
23
24 </tr>
25 <tr>