基于Bootstrap的網(wǎng)頁計算器的設(shè)計與實現(xiàn)

李文文

（安徽水利水電職業(yè)技術(shù)學(xué)院，安徽合肥 230002)

計算器是人們?nèi)粘Ｉ钪谐Ｓ玫男」ぞ撸话愕挠嬎闫鞑痪邆溥B續(xù)計算的功能，使用不方便，連續(xù)計算器能夠進(jìn)行加、減、乘、除的連續(xù)運(yùn)算，解決日常計算的問題，因此設(shè)計一款簡單實用的連續(xù)計算器有重要的實際意義。本文基于Bootstrap框架設(shè)計了一款界面簡潔、可連續(xù)計算的網(wǎng)頁計算器。

1 Bootstrap框架概述

Bootstrap是基于HTML、CSS、JavaScript等Web前端技術(shù)的前端開源框架，它預(yù)定義了一套CSS樣式[1]。使用它開發(fā)網(wǎng)頁更便捷，只需要提供固定的HTML結(jié)構(gòu)，并添加Bootstrap中提供的class名稱，即可實現(xiàn)簡潔美觀的頁面效果。Bootstrap引入了12欄柵格結(jié)構(gòu)的布局理念，提供了一套響應(yīng)式的流式柵格系統(tǒng)，能夠自適應(yīng)于智能手機(jī)、平板電腦和臺式機(jī)[2]。Bootstrap集成了豐富的組件，里面涵蓋了Web開發(fā)常用的幾十種組件[3]。它擁有完備的框架結(jié)構(gòu)，為開發(fā)人員提供了用于架構(gòu)流行的用戶界面和交互接口的工具集，所以Bootstrap具有快速開發(fā)功能，使用它很容易設(shè)計出高質(zhì)量的網(wǎng)頁。

2 設(shè)計思路

網(wǎng)頁計算器實現(xiàn)的功能：用戶單擊第一個數(shù)字，然后單擊運(yùn)算符，再單擊第二個數(shù)字，再單擊第二個運(yùn)算符……，算式輸入完成后，單擊“=”，頁面根據(jù)先乘除后加減的運(yùn)算規(guī)則計算出結(jié)果并顯示，當(dāng)用戶單擊“AC”按鈕，清除結(jié)果顯示框的內(nèi)容。計算器的設(shè)計分為界面設(shè)計和功能實現(xiàn)兩部分。界面設(shè)計使用Bootstrap框架進(jìn)行布局設(shè)計和按鈕外觀設(shè)計，功能實現(xiàn)部分使用交互式腳本語言JavaScript編寫函數(shù)實現(xiàn)計算功能，然后在界面中調(diào)用函數(shù)實現(xiàn)計算器按鈕的交互功能。

3 設(shè)計實現(xiàn)

3.1 計算器界面設(shè)計

根據(jù)上文的功能分析，計算器包括十七個組件：運(yùn)算結(jié)果顯示文本框，0～9十個數(shù)字按鈕，加、減、乘、除、等于五個運(yùn)算符按鈕和清除按鈕。在進(jìn)行界面設(shè)計時，遵循簡潔和便于操作的基本原則[4]。設(shè)計完成后的界面如圖1所示。

圖1 計算器界面

計算器的界面分為5行4列，采用Bootstrap的柵格系統(tǒng)進(jìn)行布局設(shè)計。這種設(shè)計方式使用行與列的組合創(chuàng)建頁面布局，設(shè)計出來的界面具有響應(yīng)式的功能，可以適應(yīng)智能手機(jī)、平板電腦和臺式機(jī)[5]。界面中運(yùn)算結(jié)果顯示文本框放在container容器中嵌套的第一行中，數(shù)字按鈕、運(yùn)算符按鈕和清除按鈕分別放在container容器中嵌套的其余四行中，每行的高度均為計算器總高度的25%。計算器中的文本框和按鈕通過引用Bootstrap中提供的class來設(shè)置背景顏色和邊框顏色。計算器的柵格系統(tǒng)布局如圖2所示。

圖2 柵格系統(tǒng)布局圖

3.2 html代碼實現(xiàn)

把bootstrap.min.css文件下載到本地，在html文件的部分引入該文件，就可以在頁面中使用Bootstrap框架中的class。引入bootstrap的代碼如下：

3.3 計算器中文字樣式的設(shè)計

Bootstrap中默認(rèn)的文字大小為16px，文字較小，這里使用CSS把文字大小設(shè)置為2倍的默認(rèn)文字大小。

3.4 計算器功能設(shè)計

計算器功能的設(shè)計使用交互式網(wǎng)頁腳本語言JavaScript，該語言提供了面向?qū)ο蟮某绦蛟O(shè)計功能[6]。創(chuàng)建JavaScript文件calculator.js，在文件中創(chuàng)建calculator對象，并定義1個數(shù)組和4個函數(shù)，它們的功能如下：

1)n數(shù)組：用于存儲輸入的數(shù)字和運(yùn)算符。

2)numClick：輸入數(shù)字函數(shù)，用來獲取用戶通過數(shù)字按鍵輸入的數(shù)字，并顯示到結(jié)果顯示文本框。

3)opClick：輸入運(yùn)算符函數(shù)，用來獲取用戶通過運(yùn)算符按鍵輸入的運(yùn)算符，并顯示到結(jié)果顯示文本框。

4)eqClick：計算函數(shù)，用來獲取結(jié)果顯示文本框中的數(shù)字和運(yùn)算符，解析后保存到n數(shù)組，按照先乘除后加減的運(yùn)算規(guī)則計算并顯示結(jié)果。

5)clearClick：清除函數(shù)，用來清除結(jié)果顯示文本框中的內(nèi)容。

3.5 JavaScript代碼實現(xiàn)

下面是計算器功能實現(xiàn)的JavaScript代碼：

3.6 計算器界面交互功能的實現(xiàn)

calculator對象設(shè)計完成后，在計算器界面的html文件中引入JavaScript文件，代碼如下：

這樣在界面的html文件中就可以調(diào)用JavaScript文件中相應(yīng)的函數(shù)，實現(xiàn)各個按鈕的交互功能。調(diào)用JavaScript文件中的函數(shù)需要為每個按鈕的標(biāo)簽綁定click事件。具體的實現(xiàn)方法如下：

1)0～9十個數(shù)字按鈕調(diào)用numclick函數(shù)。

以數(shù)字0按鈕為例，代碼如下：

當(dāng)用戶單擊網(wǎng)頁計算器中的按鈕就會觸發(fā)click事件，然后調(diào)用相應(yīng)的處理函數(shù)，完成對應(yīng)的操作。如圖3所示，單擊計算器中的數(shù)字和運(yùn)算符按鈕輸入算式，顯示框中顯示輸入的內(nèi)容，算式輸入完以后單擊等于按鈕，運(yùn)算結(jié)果顯示在結(jié)果顯示框中，如圖4所示。

圖3 算式輸入

圖4 顯示結(jié)果

4 結(jié)束語

網(wǎng)頁計算器的界面設(shè)計使用Bootstrap框架中的柵格系統(tǒng)和按鈕組件，它提供的class讓界面設(shè)計變得簡單，設(shè)計出來的界面具有響應(yīng)式的功能，能適應(yīng)各種終端設(shè)備[7]。計算器功能的實現(xiàn)利用JavaScript腳本語言面向?qū)ο蟮奶攸c，將功能的實現(xiàn)拆分到4個函數(shù)中，通過函數(shù)的調(diào)用完成計算器連續(xù)計算的功能[8]。該設(shè)計界面簡潔，能夠?qū)崿F(xiàn)加、減、乘、除的連續(xù)運(yùn)算，使用簡單方便。