基于Bootstrap和JavaScript技術(shù)設(shè)計(jì)與實(shí)現(xiàn)簡易Web計(jì)算器

賴佳星

摘要：HTML技術(shù)已經(jīng)成為移動互聯(lián)時(shí)代中前端開發(fā)的重要技術(shù)之一，高職院校為了適應(yīng)新時(shí)代的需求，開設(shè)相應(yīng)的前端開發(fā)課程非常必要。該文使用Bootstrap框架實(shí)現(xiàn)了簡易計(jì)算器的主體結(jié)構(gòu)設(shè)計(jì)，并使用CSS3層疊樣式表對計(jì)算器的外觀進(jìn)行了相應(yīng)的美化;使用JavaScript腳本實(shí)現(xiàn)了計(jì)算器的加、減、乘、除、退格和清零操作。通過該實(shí)例可以讓高職學(xué)生較好地體會前端開發(fā)中各項(xiàng)技術(shù)的綜合使用。

關(guān)鍵詞：HTMLJavaScriptBootstrapWeb計(jì)算器

中圖分類號：TP312文獻(xiàn)標(biāo)識碼：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

近年來，隨著移動互聯(lián)網(wǎng)的不斷發(fā)展、電腦和手機(jī)等電子設(shè)備的迅速普及，微信用戶數(shù)量也在不斷增加。研究表明，微信已成為當(dāng)代中國網(wǎng)民獲取與分享信息的重要新媒體工具[1]。其中微信公眾號和小程序是分享信息的重要渠道，而開發(fā)微信公眾號與小程序就和Web前端開發(fā)密不可分。當(dāng)下前端開發(fā)技術(shù)主要有HTML、CSS與JavaScript，三者被稱為前端開發(fā)的“三劍客”。

隨著5G時(shí)代的到來，前端開發(fā)的應(yīng)用場景與需求在不斷增加，Web前端開發(fā)的招聘崗位具有需求量大、就業(yè)面向廣、薪資待遇高等特點(diǎn)，所以在高職院校計(jì)算機(jī)類專業(yè)開設(shè)相關(guān)的前端開發(fā)課程很有必要。使用一個(gè)Web前端開發(fā)綜合案例，讓高職學(xué)生更好地體會前端開發(fā)中各項(xiàng)技術(shù)的使用。

1 ?前端開發(fā)技術(shù)介紹

1.1 HTML技術(shù)

HTML的全稱為超文本標(biāo)記語言（Hyper Text Markup Language），是一種用于創(chuàng)建網(wǎng)頁的計(jì)算機(jī)標(biāo)準(zhǔn)標(biāo)記語言[2]。HTML包括一系列的標(biāo)簽，通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，是Web前端開發(fā)中必不可少的一門語言。HTML在這20多年的發(fā)展歷程中，共經(jīng)歷了6個(gè)不同的版本，其中最新修訂版本HTML5標(biāo)準(zhǔn)是萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成的。HTML5增加了豐富的Web內(nèi)容，擁有新的語義、圖形及多媒體元素，使移動設(shè)備上可以支持多媒體，HTML5技術(shù)極大地促進(jìn)了Web前端設(shè)計(jì)的發(fā)展[3-4]。

1.2 CSS技術(shù)

CSS的全稱為層疊樣式表（Cascading Style Sheets），也是一種計(jì)算機(jī)語言，用來控制Web頁面的顏色、背景、邊框、字體等HTML元素的外觀。CSS主要具有易于使用和修改、有豐富的樣式定義、多頁面應(yīng)用等特點(diǎn)。經(jīng)過十幾年的不斷發(fā)展，CSS從CSS1演變到了目前應(yīng)用較為廣泛的CSS3[5-6]。其演變特點(diǎn)是朝著模塊化發(fā)展，把原規(guī)范中龐大的模塊分解成一些小的模塊，并且不斷更新不同的模塊，主要有盒子模型、列表模塊、超鏈接顯示模塊、文字特效和媒體查詢模塊等，這樣的好處是使CSS3的應(yīng)用得到了較好的推廣。

1.3 JavaScript技術(shù)

JavaScript（簡稱JS）技術(shù)是專門用于Web前端設(shè)計(jì)的解釋型動態(tài)腳本語言，其主要作用是通過操作HTML元素動態(tài)的修改Web頁面。JavaScript是互聯(lián)網(wǎng)上最流行的腳本語言，所有現(xiàn)代的HTML頁面都使用JavaScript。

1.4 Bootstrap框架

Bootstrap是由Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)的，是一個(gè)基于HTML、CSS和JavaScript的CSS/HTML前端框架。開發(fā)者只需要引用一些Bootstrap定義好的類（即“class”）名，即可使用具有默認(rèn)樣式的精美組件快速開發(fā)Web應(yīng)用程序和網(wǎng)站，也可以進(jìn)行定制化開發(fā)覆蓋組件的默認(rèn)樣式。

Bootstrap包含了一個(gè)響應(yīng)式的、移動設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。Bootstrap網(wǎng)格系統(tǒng)使用不同的類名來表示不同的移動設(shè)備：“col-xs”表示屏幕寬度小于768px的超小設(shè)備手機(jī)、“col-sm”表示屏幕寬度大于等于768px并且小于992px的小型平板電腦、“col-md”表示屏幕寬度大于等于992px且小于1200px的中型設(shè)備臺式電腦、“col-lg”表示屏幕寬度大于等于1200px的大型臺式電腦。

2 ?設(shè)計(jì)與實(shí)現(xiàn)

2.1 Web計(jì)算器效果及功能

該項(xiàng)目的主要功能是實(shí)現(xiàn)一個(gè)簡易的Web計(jì)算器，其設(shè)計(jì)完成后的效果如圖1所示。通過效果圖可以發(fā)現(xiàn)，此次設(shè)計(jì)的計(jì)算器主要由1個(gè)文本框、17個(gè)公式編輯按鈕和3個(gè)邏輯按鈕組成。其中文本框用來顯示計(jì)算公式和結(jié)果;公式編輯按鈕包括數(shù)字、小數(shù)點(diǎn)、取余和加減乘除算術(shù)運(yùn)算符;邏輯按鈕主要用來實(shí)現(xiàn)退格、清零以及計(jì)算的功能。

此次設(shè)計(jì)的Web計(jì)算器主要的功能為：當(dāng)用戶打開計(jì)算器時(shí)文本框中默認(rèn)顯示數(shù)字“0”;當(dāng)用戶輸入第一個(gè)操作數(shù)（個(gè)位或多位數(shù)）并未點(diǎn)擊運(yùn)算符之前，文本框的內(nèi)容由默認(rèn)的“0”改為當(dāng)前輸入的操作數(shù)，直到用戶點(diǎn)擊運(yùn)算符時(shí)則在操作數(shù)后顯示相應(yīng)的操作符;接著輸入第二個(gè)操作數(shù)，當(dāng)單擊“=”按鈕時(shí)，輸入操作結(jié)束并在文本框中顯示計(jì)算結(jié)果;如果繼續(xù)點(diǎn)擊運(yùn)算符，則將上一次的計(jì)算結(jié)果作為第一個(gè)操作數(shù)進(jìn)行下一輪計(jì)算[5]。

2.2 HTML代碼

分析Web計(jì)算器效果視圖得出，整個(gè)Web頁面只有一個(gè)計(jì)算器，頁面相對比較簡單。為了實(shí)現(xiàn)該Web計(jì)算器在PC機(jī)、平板電腦及手機(jī)等電子設(shè)備上均可正常顯示，使用Bootstrap 3框架中的柵格系統(tǒng)將整個(gè)網(wǎng)頁的內(nèi)容分為12個(gè)網(wǎng)格，并根據(jù)這12個(gè)網(wǎng)格進(jìn)行內(nèi)容的布局并且實(shí)現(xiàn)響應(yīng)式的設(shè)計(jì)，完成計(jì)算器的頁面制作，HTML代碼如圖2所示。

2.3 ?CSS代碼

根據(jù)Bootstrap框架自帶的文本框和按鈕組件，完成了計(jì)算器簡單的外觀設(shè)置，但不能完全滿足此次設(shè)計(jì)的需要，遂在Bootstrap組件樣式上進(jìn)行自定義設(shè)置：在HTML中的每個(gè)<button>按鈕中添加了一個(gè)自定義的類名稱“btn_num”，用于更改Bootstrap中按鈕的樣式，以及使用id選擇器更改文本框的寬高，代碼如圖3所示。

2.4計(jì)算器邏輯功能的實(shí)現(xiàn)

Web計(jì)算器的邏輯功能主要分為四部分：單擊數(shù)字或運(yùn)算符按鈕然后在文本框中顯示輸入的數(shù)字或者運(yùn)算符;單擊“=”按鈕，在文本框中顯示計(jì)算結(jié)果;單擊“Back”按鈕，則刪除上一個(gè)數(shù)字或運(yùn)算符，實(shí)現(xiàn)退格的作用;單擊“C”按鈕則清除文本框中的數(shù)據(jù)并恢復(fù)到初始狀態(tài)。計(jì)算器的邏輯功能由JavaScript代碼實(shí)現(xiàn)，具體可以分解為以下4個(gè)部分。

2.4.1 輸入功能的實(shí)現(xiàn)

在HTML代碼中為計(jì)算器中的所有數(shù)字和運(yùn)算符按鈕添加一個(gè)點(diǎn)擊事件“onclick”，該點(diǎn)擊事件用來執(zhí)行自定義函數(shù)“Counter”，獲取用戶的輸入操作。當(dāng)用戶單擊數(shù)字或運(yùn)算符按鈕時(shí)，通過document.getElementById的方法獲取對應(yīng)按鈕的“值”，并將公式顯示在文本框中，具體的代碼如圖4所示.

2.4.2 計(jì)算功能的實(shí)現(xiàn)

在HTML代碼的“=”按鈕中添加一個(gè)點(diǎn)擊事件，單擊該按鈕時(shí)會執(zhí)行自定義的函數(shù)“Calculate”，用來計(jì)算用戶輸入的結(jié)果。當(dāng)用戶單擊“=”按鈕時(shí)，通過內(nèi)置的eval函數(shù)計(jì)算輸入公式的值并顯示在文本框中，具體的代碼如圖5所示。

2.4.3 退格功能的實(shí)現(xiàn)

為了實(shí)現(xiàn)計(jì)算器的退格功能，在HTML的“Back”按鈕中添加一個(gè)點(diǎn)擊事件，單擊該按鈕時(shí)會執(zhí)行自定義的函數(shù)“Backspace”，用來刪除輸入的上一個(gè)字符。當(dāng)用戶單擊“Back”按鈕時(shí)，通過substring方法在文本框中刪除輸入的上一個(gè)字符，具體的代碼如圖6：

2.4.4 清零功能的實(shí)現(xiàn)

為了實(shí)現(xiàn)計(jì)算器的清零功能，在HTML的“C”按鈕中添加一個(gè)點(diǎn)擊事件，單擊該按鈕時(shí)會執(zhí)行自定義的函數(shù)“Clearnum”，用來清空文本框的數(shù)據(jù)并恢復(fù)到初始狀態(tài)。當(dāng)用戶單擊“C”按鈕時(shí)，通過將文本框的數(shù)據(jù)置為“null”實(shí)現(xiàn)清零的功能，具體的代碼如圖7所示。

3 ?結(jié)語

使用Bootstrap3的相關(guān)組件可以快速的制作Web計(jì)算器的頁面并實(shí)現(xiàn)響應(yīng)式布局;通過CSS代碼對計(jì)算器的外觀進(jìn)行美化操作;使用JavaScript腳本自定義計(jì)算機(jī)4個(gè)功能的函數(shù)，通過點(diǎn)擊事件調(diào)取相應(yīng)的函數(shù)實(shí)現(xiàn)計(jì)算器的邏輯功能。設(shè)計(jì)與實(shí)現(xiàn)該簡易Web計(jì)算器可以更好的體會前端開發(fā)技術(shù)之間的綜合運(yùn)用，也可以為開發(fā)更加復(fù)雜的計(jì)算器打下基礎(chǔ)。

參考文獻(xiàn)

[1] 姜春林，王曉萍.基于典型微信公眾號的科普計(jì)量研究[J].科技管理研究，2020（2）：252-261.

[2] 陳仕許.基于就業(yè)導(dǎo)向的HTML5前端開發(fā)課程教學(xué)改革實(shí)踐分析[J].計(jì)算機(jī)產(chǎn)品與流通，2020（10）：247.

[3] 吳元杰，何毅平，朱曉慶，等.基于HTML5技術(shù)的移動Web前端設(shè)計(jì)與開發(fā)[J].信息記錄材料，2021，22（8）：139-141.

[4] 孫文悅. 基于HTML5的消防維保APP的設(shè)計(jì)與實(shí)現(xiàn)[D].西安：西安電子科技大學(xué)，2020.

[5] 胡雅麗.基于BootStrap+JavaScript語言簡易計(jì)算器的實(shí)現(xiàn)[J].太原學(xué)院學(xué)報(bào)：自然科學(xué)版，2020，38（1）：73-76.

[6] 許凌峰. 基于Web的智慧社區(qū)信息平臺設(shè)計(jì)與實(shí)現(xiàn)[D].南京：南京郵電大學(xué)，2019.