基于Bootstrap的网页计算器的设计与实现
作者: 李文文
摘要: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的代码如下:
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
下面是计算器界面的html代码:
<body>
<div class="container" style="height:400px;">
<div class="row h-25">
<input class="col-12 border-light bg-light" value="" id="output" disabled="disabled">
</div>
<div class="row h-25">
<input class="col-3 btn btn-primary border-light" type="button" value="7">
<input class="col-3 btn btn-primary border-light" type="button" value="8">
<input class="col-3 btn btn-primary border-light" type="button" value="9">
<input class="col-3 btn btn-primary border-light" type="button" value="*">
</div>
<div class="row h-25">
<input class="col-3 btn btn-primary border-light" type="button" value="4">
<input class="col-3 btn btn-primary border-light" type="button" value="5">
<input class="col-3 btn btn-primary border-light" type="button" value="6">
<input class="col-3 btn btn-primary border-light" type="button" value="-">
</div>
<div class="row h-25">
<input class="col-3 btn btn-primary border-light" type="button" value="1">
<input class="col-3 btn btn-primary border-light" type="button" value="2">
<input class="col-3 btn btn-primary border-light" type="button" value="3">
<input class="col-3 btn btn-primary border-light" type="button" value="+">
</div>
<div class="row h-25">
<input class="col-3 btn btn-primary border-light" type="button" value="0">
<input class="col-3 btn btn-primary border-light" type="button" value="AC">
<input class="col-3 btn btn-primary border-light" type="button" value="=">
<input class="col-3 btn btn-primary border-light" type="button" value="/">
</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;
}