賴佳星

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

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

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

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

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

1.1 HTML技術(shù)

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

1.2 CSS技術(shù)

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

1.3 JavaScript技術(shù)

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

1.4 Bootstrap框架

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

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

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

2.1 Web計算器效果及功能

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

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

2.2 HTML代碼

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

2.3 ?CSS代碼

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

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

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

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

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

2.4.2 計算功能的實現(xiàn)

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

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

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

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

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

3 ?結(jié)語

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

參考文獻(xiàn)

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

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

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

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

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

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