基于Bootstrap的网页计算器的设计与实现

李文文

（安徽水利水电职业技术学院，安徽合肥 230002)

计算器是人们日常生活中常用的小工具，一般的计算器不具备连续计算的功能，使用不方便，连续计算器能够进行加、减、乘、除的连续运算，解决日常计算的问题，因此设计一款简单实用的连续计算器有重要的实际意义。本文基于Bootstrap框架设计了一款界面简洁、可连续计算的网页计算器。

1 Bootstrap框架概述

Bootstrap是基于HTML、CSS、JavaScript等Web前端技术的前端开源框架，它预定义了一套CSS样式[1]。使用它开发网页更便捷，只需要提供固定的HTML结构，并添加Bootstrap中提供的class名称，即可实现简洁美观的页面效果。Bootstrap引入了12栏栅格结构的布局理念，提供了一套响应式的流式栅格系统，能够自适应于智能手机、平板电脑和台式机[2]。Bootstrap集成了丰富的组件，里面涵盖了Web开发常用的几十种组件[3]。它拥有完备的框架结构，为开发人员提供了用于架构流行的用户界面和交互接口的工具集，所以Bootstrap具有快速开发功能，使用它很容易设计出高质量的网页。

2 设计思路

网页计算器实现的功能：用户单击第一个数字，然后单击运算符，再单击第二个数字，再单击第二个运算符……，算式输入完成后，单击“=”，页面根据先乘除后加减的运算规则计算出结果并显示，当用户单击“AC”按钮，清除结果显示框的内容。计算器的设计分为界面设计和功能实现两部分。界面设计使用Bootstrap框架进行布局设计和按钮外观设计，功能实现部分使用交互式脚本语言JavaScript编写函数实现计算功能，然后在界面中调用函数实现计算器按钮的交互功能。

3 设计实现

3.1 计算器界面设计

根据上文的功能分析，计算器包括十七个组件：运算结果显示文本框，0～9十个数字按钮，加、减、乘、除、等于五个运算符按钮和清除按钮。在进行界面设计时，遵循简洁和便于操作的基本原则[4]。设计完成后的界面如图1所示。

图1 计算器界面

计算器的界面分为5行4列，采用Bootstrap的栅格系统进行布局设计。这种设计方式使用行与列的组合创建页面布局，设计出来的界面具有响应式的功能，可以适应智能手机、平板电脑和台式机[5]。界面中运算结果显示文本框放在container容器中嵌套的第一行中，数字按钮、运算符按钮和清除按钮分别放在container容器中嵌套的其余四行中，每行的高度均为计算器总高度的25%。计算器中的文本框和按钮通过引用Bootstrap中提供的class来设置背景颜色和边框颜色。计算器的栅格系统布局如图2所示。

图2 栅格系统布局图

3.2 html代码实现

把bootstrap.min.css文件下载到本地，在html文件的部分引入该文件，就可以在页面中使用Bootstrap框架中的class。引入bootstrap的代码如下：

3.3 计算器中文字样式的设计

Bootstrap中默认的文字大小为16px，文字较小，这里使用CSS把文字大小设置为2倍的默认文字大小。

3.4 计算器功能设计

计算器功能的设计使用交互式网页脚本语言JavaScript，该语言提供了面向对象的程序设计功能[6]。创建JavaScript文件calculator.js，在文件中创建calculator对象，并定义1个数组和4个函数，它们的功能如下：

1)n数组：用于存储输入的数字和运算符。

2)numClick：输入数字函数，用来获取用户通过数字按键输入的数字，并显示到结果显示文本框。

3)opClick：输入运算符函数，用来获取用户通过运算符按键输入的运算符，并显示到结果显示文本框。

4)eqClick：计算函数，用来获取结果显示文本框中的数字和运算符，解析后保存到n数组，按照先乘除后加减的运算规则计算并显示结果。

5)clearClick：清除函数，用来清除结果显示文本框中的内容。

3.5 JavaScript代码实现

下面是计算器功能实现的JavaScript代码：

3.6 计算器界面交互功能的实现

calculator对象设计完成后，在计算器界面的html文件中引入JavaScript文件，代码如下：

这样在界面的html文件中就可以调用JavaScript文件中相应的函数，实现各个按钮的交互功能。调用JavaScript文件中的函数需要为每个按钮的标签绑定click事件。具体的实现方法如下：

1)0～9十个数字按钮调用numclick函数。

以数字0按钮为例，代码如下：

当用户单击网页计算器中的按钮就会触发click事件，然后调用相应的处理函数，完成对应的操作。如图3所示，单击计算器中的数字和运算符按钮输入算式，显示框中显示输入的内容，算式输入完以后单击等于按钮，运算结果显示在结果显示框中，如图4所示。

图3 算式输入

图4 显示结果

4 结束语

网页计算器的界面设计使用Bootstrap框架中的栅格系统和按钮组件，它提供的class让界面设计变得简单，设计出来的界面具有响应式的功能，能适应各种终端设备[7]。计算器功能的实现利用JavaScript脚本语言面向对象的特点，将功能的实现拆分到4个函数中，通过函数的调用完成计算器连续计算的功能[8]。该设计界面简洁，能够实现加、减、乘、除的连续运算，使用简单方便。