用HTML+CSS+JavaScript实现计算器的设计

于 万 国

(河北民族师范学院 数学与计算机系，河北 承德 067000)

1 背景分析

用户在浏览网页时，经常会使用到计算器来执行一些计算功能，用HTML+CSS+JavaScript的完美组合可以设计一个界面美观、方便实用的计算器.用HMTL实现网页的基本结构，即一个五行四列的表格，第一行第一个单元格是跨列的，用做结果框，其它每个单元格里是一个按钮；用CSS美化计算器的界面外观；最后用JavaScript完成计算器的计算功能.该计算器的关键是它的计算功能的实现.围绕计算又会产生一些子问题，第一，如何让用户点击的运算数显示在结果框中(如显示用户点击的算式：1+2)？第二，如何进行计算，并将计算结果显示在结果框中(如在结果框中显示计算结果：3)？第三，当用户计算完或点击错误，如何清除之前的运算数或结果(即在结果框中显示为：0)？该设计完成后的效果如图1所示.

图1 计算器外观

2 设计实现

2.1 分析网页结构，写出index.html代码

整个页面没有其他内容，只有一个计算器，可以使用表格和按钮组合写出，之后需要使用JavaScript取到每个按钮的值，这里可以使用给每个按钮设置value属性来为之后做准备，结果框可以使用ID属性，来为之后编写JavaScript代码做基础.网页结构代码如下：

2.2 分析网页的表现形式，使用CSS对其进行美化修饰，写出css.css

要注意的是，结果框中的内容显示方式是从右向左.CSS代码如下：

body{font:bolder 26px ;}

#result{text-align:right;}

table,td{border:1px solid #C0C0C0;}

td{ padding:10px;}

button{width:50px; height:50px; }

2.3 编写外部JavaScript文件js.js

分解如下：

1) 将用户点击的数据存入字符串中并将其显示在结果框中，这里字符串中的值会在多个函数中用到，所以先将其定义为全局变量：str = ""；

2) 写数据显示函数showData().也就是将用户点击过的数据显示出来，这里可以先将用户点击的数据存入字符串中，以备之后计算使用，然后将字符串显示出来.之后使用ocument.getElementById("result").innerHTML= str； 其中document.getElementById是DOM中的方法，"result"是结果框的ID属性值，innerHTML是将str中的值显示在结果框中.函数showData()代码如下：

function showData(which){

str += which.value;

document.getElementById("result").innerHTML = str;

}

3) 以上的showData()函数写好后，当我们添加了相应的事件响应函数之后就可以实现用户点击过的数据显示在结果框中.下来就要考虑当用户点击等号时，将运算结果显示在结果框中.这个问题需要分三步解决：第一，当用户点击等号时，之前点击的被运算数在结果框中清除；第二，进行数据运算；第三，将运算结果显示在结果框中.这三个步骤合在一起放在一个函数calculate中.

4) 在calculate()函数中，第一步，清除用户点击过的被运算数，使用document.getElementById("result"). innerHTML = ""语句，跟之前所使用的语句是同样的道理.第二步，进行数据运算可以使用eval()函数，此函数的功能是计算某个字符串，并返回计算结果，这里可以将其返回结果存入resultNum中.第三步，将resultNum显示在结果框中，仍然是使用的document.getElementById("result").innerHTML = resultNum这条语句.另外，还有一种情况，用户在计算完成后，可能不直接清除计算结果，而是在当前结果的基础上继续运算，所以需要将计算结果保存在字符串中. calculate()函数代码如下：

function calculate(){

document.getElementById("result").innerHTML = '';

var resultNum = eval(str);

resultNum += '';

if (resultNum.indexOf(".")>0)

{

var a = resultNum.indexOf(".");

resultNum = resultNum.substring(0,a+3);

}

document.getElementById("result").innerHTML = resultNum;

str = resultNum;

}

5) 当用户点击C时，字符串内容清空，并将结果框中的内容清0，这里可以编写函数clearData().第一步字符串内容清空；第二步，结果框中显示0，可以使用语句document.getElementById("result").innerHTML = 0.函数clearData() 代码如下：

function clearData(){

str = "";

document.getElementById("result").innerHTML = 0;

}

6) 编写事件响应函数diverseFun(which).也就是当用户点击不同的内容，该计算器给出不同的响应，比如：当用户点击"="时，执行计算函数；当用户点击"C"时，执行数据清除函数；当用户点击其他数字和运算符时，执行数据显示函数.这里可以使用每个按钮加一个onclick属性，其属性值为相应的响应函数，但这种办法代码量较多，不提倡用这种方法.换种方法，可以使用语句document. getElementsByTagName("button")先获得所有button这些标记，然后使用for循环，给所有按钮添加鼠标点击响应函数.这个响应函数就要分如上说的三种情况了，在这个响应函数中可以使用switch语句来解决这个问题，当分别点击"="、"C"和其他数据时执行不同的操作，即等于不同的响应函数名.diverseFun(which)代码如下：

3 总结

在该实现方法中用到了JavaScript中的BOM和DOM模型的使用，JavaScript中事件处理函数以及每个自定义函数之间的关系等等.利用好这些知识点，可以实现更加复杂的计算器.