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

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

摘要：Bootstrap是一种Web前端开源框架，文章在Bootstrap框架下使用栅格系统布局网页计算器的界面，使用交互式脚本语言JavaScript实现计算器加、减、乘、除连续运算的功能，并给出了HTML和JavaScript的实现代码。

关键词：Bootstrap;计算器;连续计算;JavaScript;栅格系统

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2022）26-0028-04

计算器是人们日常生活中常用的小工具，一般的计算器不具备连续计算的功能，使用不方便，连续计算器能够进行加、减、乘、除的连续运算，解决日常计算的问题，因此设计一款简单实用的连续计算器有重要的实际意义。本文基于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所示。

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

3.2 html代码实现

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

下面是计算器界面的html代码：

<body>

</div>

</div>

</div>

</div>

</div>

</body>

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

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

input[value]{font-size：2em;}

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代码：

var calculator={

//输入数字函数

numClick：function（value）{

var v=document.getElementById（"output"）.value;

if（value=="0"&&v=="0"）{

return;

}

if（v=="0"）{

document.getElementById（"output"）.value=value;

}else{

document.getElementById（"output"）.value=v+value;

}

}，

//输入运算符函数

opClick：function（value）{

var v=document.getElementById（"output"）.value;

if（v[v.length-1]==" "）{

return;

}

document.getElementById（"output"）.value=v+" "+value+" ";

}，

//计算函数

eqClick：function（）{

n=document.getElementById（"output"）.value.split（" "）;

for（var i=0; i<n.length;i++）{

if（n[i]=="*"||n[i]=="/"）{

if（n[i+1]==""）{

n[i+1]=1;

}