純 HTML+CSS+JavaScript 編寫的計算器應用

一道筆試題

以前偶然看到一個公司的筆試題，題目以下：

用HTML五、CSS三、JavaScript，作一個網頁，實現以下圖形式計算器

具體要求：

1. 有且只有一個文件：index.html。不容許再有其餘文件，不容許再有單獨的CSS、JS、PNG、JPG文件。

2. 運行環境爲 Google Chrome。

3. 必須支持標準的四則運算。例如：1+2*3=7。

4. 請在收到郵件的48小時內獨立完成本測試，並回複本郵件。

一道筆試題引起的一個練手項目

花了一點時間寫好的初版，符合了筆試題的要求。後來左看右看以爲還能夠改進作的更好，因而給它不斷的改進，加新功能等，這樣下來沒完沒了，利用業餘時間一點一點的寫，從剛開始的網頁版，到後來作響應式的移動版，再到如今的移動App，短短續續大概寫了3個月吧。

項目地址

最終版的計算器，項目地址和預覽圖片在 GitHub：https://github.com/dunizb/sCalc。

功能說明

最終版的功能以下：

1. 界面佈局採用CSS3 的 Flex box佈局

2. 內置兩套主題可切換

3. 計算曆史記錄顯示

4. 左滑右滑能夠切換單手模式(App)

5. 當輸入手機號碼後長按等於號能夠撥打手機號碼(App)

6. 版本更新檢查(App)

界面佈局

因爲這個項目只是練手,因此採用了HTML5個CSS3技術，也不打算兼容IE等低版本瀏覽器，因此直接使用CSS3提供的Flexbox佈局方式。而且使用rem單位來進行自動計算尺寸。

計算計算曆史記錄顯示功能，使用HTML5提供的本地存儲功能之Local Storage，爲了方便使用Local Storage，對它進行了簡單的封裝（見js/common.js文件）使之key值按必定規律生產，方便管理。

key由appName+id組成，id是自動增加不重複的，能夠按id和appName刪除一條記錄，輸入*則所有刪除。

打包APP

移動Web版計算器寫完後，又想把他作成APP在手機上運行，因爲本人沒用過混合APP諸如ionic之類的框架，因此參考了一下，選擇了Hbuild來進行開發和APP的打包，很是方便。（HBuild）.

單手模式

左滑右滑能夠切換單手模式，這就須要移動端的touch事件了，使用以下代碼判斷是左滑仍是又滑：

/** 單手模式 */
function singleModel(){
    var calc = document.getElementById("calc");
    var startX = 0,moveX = 0,distanceX = 0;
    var distance = 100;  
    var width = calc.offsetWidth;
    //滑動事件
    calc.addEventListener("touchstart",function(e){
        startX = e.touches[0].clientX;
    });
    calc.addEventListener("touchmove",function(e){
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    });
    window.addEventListener("touchend",function(e){
        if(Math.abs(distanceX) > width/3 && isMove){
            if( distanceX > 0 ){
                positionFun("right");        //右滑
            }else{
                positionFun("left");          //做滑
            }
        }
        startY = moveY = 0;
        isMove = false;
    });   
}

若是是坐滑，就position:absolut;left:0,bottom:0，再把最外層DIV縮小到80%，這樣就實現了左滑計算器縮小移動到左下角。右滑道理同樣。

電話撥打功能

當輸入手機號碼後長按等於號能夠撥打手機號碼。這個功能沒什麼神奇，在移動Web上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

• 7位數字，形如：1234567

• 帶括號及加號的數字，形如：(+86)123456789

• 雙鏈接線的數字，形如：00-00-00111

• 11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來開啓電話號碼的自動識別：

<meta name="format-detection" content="telephone=yes" />

開啓電話功能

<a href="tel:123456">123456</a>

開啓短信功能：

<a href="sms:123456">123456</a>

可是，在Android系統上，只能調用系統的撥號界面，在iOS上則能調過這一步直接把電話撥打出去。

版本更新檢查

在關於頁面，有一個版本更新檢查按鈕，就能檢查是否有新版本，這個功能的原理是發送一個JSOPN請求去檢查服務器上的JSON文件，比對版本號，若是服務器上的版本比APP的版本高則會提示有新版本能夠下載。\

客戶端JavaScript代碼：

function updateApp(){
    //檢查新版本
    var updateApp = document.getElementById("updateApp");
    updateApp.onclick = function(){
        var _this = this;
        $.ajax({
            type:'get',
            url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?',
            dataType:'jsonp',
            beforeSend : function(){
                _this.innerHTML = "<i class='iconfont updateAppIcon updateAppIconRotate'></i> 正在檢查新版本...";
            },
            success:function(data){
                var newVer = data[0].version;
                if(newVer > appConfig.version){
                    var log = data[0].log;
                    var downloadUrl = data[0].downloadUrl;
                    if(confirm("檢查到新版本【"+newVer+"】，是否當即下載？\n 更新日誌：\n " + log)){
                        var a = document.getElementById("telPhone");
                        a.href = downloadUrl;
                        a.target = "_blank";
                        a.click();
                    }
                }else{
                    alert("你很潮哦，當前已是最新版本！");
                }
                _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 檢查新版本";
            },
            error:function(msg){
                _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 檢查新版本";
                alert("檢查失敗："+msg.message);
            }
        });
    }
}

服務端JSON：

[
    {
        "version":"3.1.0",
        "downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk",
        "hashCode":"20160812224616",
        "log":"1.新增切換主題功能 \n 2.新增單手切換模式功能 \n 3.調整UI "
    }
]

下個版本計劃

當前3.1.0版本還存在一些問題：

1. 因爲JS自己存在計算浮點數精度丟失問題，因此這個問題在項目中贊成存在，須要本身去處理這個問題

2. 因爲使用了第三方的天氣接口，用了jquery.Ajax方法，因此違背了使用純原生寫的初衷。

因此下個版本的開發計劃爲：

1. 解決浮點數計算精度問題

2. 把獲取天氣信息的jquery.Ajax方法替換爲原生JavaScript代碼，本身封裝JSONP請求函數

3. 使用面向對象方式重構APP

歡迎你們到github上來看看，若是喜歡能夠star、watch一下，或提issue。