基于Bootstrap的網頁計算器的設計與實現

李文文

（安徽水利水電職業技術學院，安徽合肥 230002)

計算器是人們日常生活中常用的小工具，一般的計算器不具備連續計算的功能，使用不方便，連續計算器能夠進行加、減、乘、除的連續運算，解決日常計算的問題，因此設計一款簡單實用的連續計算器有重要的實際意義。本文基于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所示。

圖1 計算器界面

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

圖2 柵格系統布局圖

3.2 html代碼實現

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

3.3 計算器中文字樣式的設計

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

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代碼：

3.6 計算器界面交互功能的實現

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

這樣在界面的html文件中就可以調用JavaScript文件中相應的函數，實現各個按鈕的交互功能。調用JavaScript文件中的函數需要為每個按鈕的標簽綁定click事件。具體的實現方法如下：

1)0～9十個數字按鈕調用numclick函數。

以數字0按鈕為例，代碼如下：

當用戶單擊網頁計算器中的按鈕就會觸發click事件，然后調用相應的處理函數，完成對應的操作。如圖3所示，單擊計算器中的數字和運算符按鈕輸入算式，顯示框中顯示輸入的內容，算式輸入完以后單擊等于按鈕，運算結果顯示在結果顯示框中，如圖4所示。

圖3 算式輸入

圖4 顯示結果

4 結束語

網頁計算器的界面設計使用Bootstrap框架中的柵格系統和按鈕組件，它提供的class讓界面設計變得簡單，設計出來的界面具有響應式的功能，能適應各種終端設備[7]。計算器功能的實現利用JavaScript腳本語言面向對象的特點，將功能的實現拆分到4個函數中，通過函數的調用完成計算器連續計算的功能[8]。該設計界面簡潔，能夠實現加、減、乘、除的連續運算，使用簡單方便。