純HTML+CSS+JS編寫的計算器應(yīng)用
一道筆試題
之前偶然看到一個公司的筆試題，題目如下：
用HTML5、CSS3、JavaScript，做一個網(wǎng)頁，實現(xiàn)如下圖形式計算器
具體要求：
- 有且只有一個文件：index.html。不允許再有其他文件，不允許再有單獨的CSS、JS、PNG、JPG文件。
- 運行環(huán)境為 Google Chrome。
- 必須支持標(biāo)準(zhǔn)的四則運算。例如：1+2*3=7。
- 請在收到郵件的48小時內(nèi)獨立完成本測試，并回復(fù)本郵件。
一道筆試題引發(fā)的一個練手項目
花了一點時間寫好的第一版，符合了筆試題的要求。后來左看右看覺得還可以改進(jìn)做的更好，于是給它不斷的改進(jìn)，加新功能等，這樣下來沒完沒了，利用業(yè)余時間一點一點的寫，從剛開始的網(wǎng)頁版，到后來做響應(yīng)式的移動版，再到現(xiàn)在的移動App，短短續(xù)續(xù)大概寫了3個月吧。
項目地址
最終版的計算器，項目地址和預(yù)覽圖片在 GitHub：https://github.com/dunizb/sCalc。
功能說明
最終版的功能如下：
- 界面布局采用CSS3 的 Flex box布局
- 內(nèi)置兩套主題可切換
- 計算歷史記錄顯示
- 左滑右滑可以切換單手模式(App)
- 當(dāng)輸入手機(jī)號碼后長按等于號可以撥打手機(jī)號碼(App)
- 版本更新檢查(App)
界面布局
由于這個項目只是練手,所以采用了HTML5個CSS3技術(shù)，也不打算兼容IE等低版本瀏覽器，所以直接使用CSS3提供的Flexbox布局方式。并且使用rem單位來進(jìn)行自動計算尺寸。
計算計算歷史記錄顯示功能，使用HTML5提供的本地存儲功能之Local Storage，為了方便使用Local Storage，對它進(jìn)行了簡單的封裝(見js/common.js文件)使之key值按一定規(guī)律生產(chǎn)，方便管理。
key由appName+id組成，id是自動增長不重復(fù)的，可以按id和appName刪除一條記錄，輸入*則全部刪除。
打包APP
移動Web版計算器寫完后，又想把他做成APP在手機(jī)上運行，由于本人沒用過混合APP諸如ionic之類的框架，所以參考了一下，選擇了Hbuild來進(jìn)行開發(fā)和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%，這樣就實現(xiàn)了左滑計算器縮小移動到左下角。右滑道理一樣。
電話撥打功能
當(dāng)輸入手機(jī)號碼后長按等于號可以撥打手機(jī)號碼。這個功能沒什么神奇，在移動Web上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接，比如：
- 7位數(shù)字，形如：1234567
- 帶括號及加號的數(shù)字，形如：(+86)123456789
- 雙連接線的數(shù)字，形如：00-00-00111
- 11位數(shù)字，形如：13800138000
可能還有其他類型的數(shù)字也會被識別。我們可以通過如下的meta來開啟電話號碼的自動識別：
- <meta name="format-detection" content="telephone=yes" />
開啟電話功能
- <a href="tel:123456">123456</a>
開啟短信功能：
- <a href="sms:123456">123456</a>
但是，在Android系統(tǒng)上，只能調(diào)用系統(tǒng)的撥號界面，在iOS上則能調(diào)過這一步直接把電話撥打出去。
版本更新檢查
在關(guān)于頁面，有一個版本更新檢查按鈕，就能檢查是否有新版本，這個功能的原理是發(fā)送一個JSOPN請求去檢查服務(wù)器上的JSON文件，比對版本號，如果服務(wù)器上的版本比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("你很潮哦，當(dāng)前已經(jīng)是最新版本！");
- }
- _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 檢查新版本";
- },
- error:function(msg){
- _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 檢查新版本";
- alert("檢查失?。?quot;+msg.message);
- }
- });
- }
- }
服務(wù)端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.調(diào)整UI "
- }
- ]
下個版本計劃
當(dāng)前3.1.0版本還存在一些問題：
- 由于JS本身存在計算浮點數(shù)精度丟失問題，所以這個問題在項目中同意存在，需要自己去處理這個問題
- 由于使用了第三方的天氣接口，用了jquery.Ajax方法，所以違背了使用純原生寫的初衷。
所以下個版本的開發(fā)計劃為：
- 解決浮點數(shù)計算精度問題
- 把獲取天氣信息的jquery.Ajax方法替換為原生JavaScript代碼，自己封裝JSONP請求函數(shù)
- 使用面向?qū)ο蠓绞街貥?gòu)APP
