基于Bootstrap和JavaScript技术设计与实现简易Web计算器

赖佳星

摘要：HTML技术已经成为移动互联时代中前端开发的重要技术之一，高职院校为了适应新时代的需求，开设相应的前端开发课程非常必要。该文使用Bootstrap框架实现了简易计算器的主体结构设计，并使用CSS3层叠样式表对计算器的外观进行了相应的美化;使用JavaScript脚本实现了计算器的加、减、乘、除、退格和清零操作。通过该实例可以让高职学生较好地体会前端开发中各项技术的综合使用。

关键词：HTMLJavaScriptBootstrapWeb計算器

中图分类号：TP312文献标识码：A   文章编号：1672-3791（2022）01（a）-0000-00

Design and Implement a Simple Web Calculator based on Bootstrap and JavaScript technology

LAI Jiaxing

（Hainan Health Management College，Chengmai，Hainan Province，571900 China）

Abstract： HTML technology has become one of the important front-end development technologies in the mobile internet era. In order to adapt to the needs of the new era， it is necessary for higher vocational colleges to set up corresponding front-end development courses. This article uses the Bootstrap framework to implement the main structure design of a simple calculator， and uses CSS3 cascading style sheets to beautify the appearance of the calculator; JavaScript scripts are used to implement the calculator's addition， subtraction， multiplication， division， backspace and Clear operation. Through this example， vocational students can better experience the comprehensive use of various technologies in front-end development.

Key Words： HTML; JavaScript; Bootstrap; Web calculator

近年来，随着移动互联网的不断发展、电脑和手机等电子设备的迅速普及，微信用户数量也在不断增加。研究表明，微信已成为当代中国网民获取与分享信息的重要新媒体工具[1]。其中微信公众号和小程序是分享信息的重要渠道，而开发微信公众号与小程序就和Web前端开发密不可分。当下前端开发技术主要有HTML、CSS与JavaScript，三者被称为前端开发的“三剑客”。

随着5G时代的到来，前端开发的应用场景与需求在不断增加，Web前端开发的招聘岗位具有需求量大、就业面向广、薪资待遇高等特点，所以在高职院校计算机类专业开设相关的前端开发课程很有必要。使用一个Web前端开发综合案例，让高职学生更好地体会前端开发中各项技术的使用。

1  前端开发技术介绍

1.1 HTML技术

HTML的全称为超文本标记语言（Hyper Text Markup Language），是一种用于创建网页的计算机标准标记语言[2]。HTML包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，是Web前端开发中必不可少的一门语言。HTML在这20多年的发展历程中，共经历了6个不同的版本，其中最新修订版本HTML5标准是万维网联盟（W3C）于2014年10月完成的。HTML5增加了丰富的Web内容，拥有新的语义、图形及多媒体元素，使移动设备上可以支持多媒体，HTML5技术极大地促进了Web前端设计的发展[3-4]。

1.2 CSS技术

CSS的全称为层叠样式表（Cascading Style Sheets），也是一种计算机语言，用来控制Web页面的颜色、背景、边框、字体等HTML元素的外观。CSS主要具有易于使用和修改、有丰富的样式定义、多页面应用等特点。经过十几年的不断发展，CSS从CSS1演变到了目前应用较为广泛的CSS3[5-6]。其演变特点是朝着模块化发展，把原规范中庞大的模块分解成一些小的模块，并且不断更新不同的模块，主要有盒子模型、列表模块、超链接显示模块、文字特效和媒体查询模块等，这样的好处是使CSS3的应用得到了较好的推广。

1.3 JavaScript技术

JavaScript（简称JS）技术是专门用于Web前端设计的解释型动态脚本语言，其主要作用是通过操作HTML元素动态的修改Web页面。JavaScript是互联网上最流行的脚本语言，所有现代的HTML页面都使用JavaScript。

1.4 Bootstrap框架

Bootstrap是由Twitter公司的设计师Mark Otto和Jacob Thornton合作开发的，是一个基于HTML、CSS和JavaScript的CSS/HTML前端框架。开发者只需要引用一些Bootstrap定义好的类（即“class”）名，即可使用具有默认样式的精美组件快速开发Web应用程序和网站，也可以进行定制化开发覆盖组件的默认样式。

Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。Bootstrap网格系统使用不同的类名来表示不同的移动设备：“col-xs”表示屏幕宽度小于768px的超小设备手机、“col-sm”表示屏幕宽度大于等于768px并且小于992px的小型平板电脑、“col-md”表示屏幕宽度大于等于992px且小于1200px的中型设备台式电脑、“col-lg”表示屏幕宽度大于等于1200px的大型台式电脑。

2  设计与实现

2.1 Web计算器效果及功能

该项目的主要功能是实现一个简易的Web计算器，其设计完成后的效果如图1所示。通过效果图可以发现，此次设计的计算器主要由1个文本框、17个公式编辑按钮和3个逻辑按钮组成。其中文本框用来显示计算公式和结果;公式编辑按钮包括数字、小数点、取余和加减乘除算术运算符;逻辑按钮主要用来实现退格、清零以及计算的功能。

此次设计的Web计算器主要的功能为：当用户打开计算器时文本框中默认显示数字“0”;当用户输入第一个操作数（个位或多位数）并未点击运算符之前，文本框的内容由默认的“0”改为当前输入的操作数，直到用户点击运算符时则在操作数后显示相应的操作符;接着输入第二个操作数，当单击“=”按钮时，输入操作结束并在文本框中显示计算结果;如果继续点击运算符，则将上一次的计算结果作为第一个操作数进行下一轮计算[5]。

2.2 HTML代码

分析Web计算器效果视图得出，整个Web页面只有一个计算器，页面相对比较简单。为了实现该Web计算器在PC机、平板电脑及手机等电子设备上均可正常显示，使用Bootstrap 3框架中的栅格系统将整个网页的内容分为12个网格，并根据这12个网格进行内容的布局并且实现响应式的设计，完成计算器的页面制作，HTML代码如图2所示。

2.3  CSS代码

根据Bootstrap框架自带的文本框和按钮组件，完成了计算器简单的外观设置，但不能完全满足此次设计的需要，遂在Bootstrap组件样式上进行自定义设置：在HTML中的每个<button>按钮中添加了一个自定义的类名称“btn_num”，用于更改Bootstrap中按钮的样式，以及使用id选择器更改文本框的宽高，代码如图3所示。

2.4计算器逻辑功能的实现

Web计算器的逻辑功能主要分为四部分：单击数字或運算符按钮然后在文本框中显示输入的数字或者运算符;单击“=”按钮，在文本框中显示计算结果;单击“Back”按钮，则删除上一个数字或运算符，实现退格的作用;单击“C”按钮则清除文本框中的数据并恢复到初始状态。计算器的逻辑功能由JavaScript代码实现，具体可以分解为以下4个部分。

2.4.1 输入功能的实现

在HTML代码中为计算器中的所有数字和运算符按钮添加一个点击事件“onclick”，该点击事件用来执行自定义函数“Counter”，获取用户的输入操作。当用户单击数字或运算符按钮时，通过document.getElementById的方法获取对应按钮的“值”，并将公式显示在文本框中，具体的代码如图4所示.

2.4.2 计算功能的实现

在HTML代码的“=”按钮中添加一个点击事件，单击该按钮时会执行自定义的函数“Calculate”，用来计算用户输入的结果。当用户单击“=”按钮时，通过内置的eval函数计算输入公式的值并显示在文本框中，具体的代码如图5所示。

2.4.3 退格功能的实现

为了实现计算器的退格功能，在HTML的“Back”按钮中添加一个点击事件，单击该按钮时会执行自定义的函数“Backspace”，用来删除输入的上一个字符。当用户单击“Back”按钮时，通过substring方法在文本框中删除输入的上一个字符，具体的代码如图6：

2.4.4 清零功能的实现

为了实现计算器的清零功能，在HTML的“C”按钮中添加一个点击事件，单击该按钮时会执行自定义的函数“Clearnum”，用来清空文本框的数据并恢复到初始状态。当用户单击“C”按钮时，通过将文本框的数据置为“null”实现清零的功能，具体的代码如图7所示。

3  结语

使用Bootstrap3的相关组件可以快速的制作Web计算器的页面并实现响应式布局;通过CSS代码对计算器的外观进行美化操作;使用JavaScript脚本自定义计算机4个功能的函数，通过点击事件调取相应的函数实现计算器的逻辑功能。设计与实现该简易Web计算器可以更好的体会前端开发技术之间的综合运用，也可以为开发更加复杂的计算器打下基础。

参考文献

[1] 姜春林，王晓萍.基于典型微信公众号的科普计量研究[J].科技管理研究，2020（2）：252-261.

[2] 陈仕许.基于就业导向的HTML5前端开发课程教学改革实践分析[J].计算机产品与流通，2020（10）：247.

[3] 吴元杰，何毅平，朱晓庆，等.基于HTML5技术的移动Web前端设计与开发[J].信息记录材料，2021，22（8）：139-141.

[4] 孙文悦. 基于HTML5的消防维保APP的设计与实现[D].西安：西安电子科技大学，2020.

[5] 胡雅丽.基于BootStrap+JavaScript语言简易计算器的实现[J].太原学院学报：自然科学版，2020，38（1）：73-76.

[6] 许凌峰. 基于Web的智慧社区信息平台设计与实现[D].南京：南京邮电大学，2019.