摘要:不允許再有其他文件,不允許再有多帶帶的文件。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。請(qǐng)?jiān)谑盏洁]件的小時(shí)內(nèi)獨(dú)立完成本測(cè)試,并回復(fù)本郵件。項(xiàng)目地址最終版的計(jì)算器,項(xiàng)目地址和預(yù)覽圖片在。并且使用單位來進(jìn)行自動(dòng)計(jì)算尺寸。
一道筆試題
之前偶然看到一個(gè)公司的筆試題,題目如下:
用HTML5、CSS3、JavaScript,做一個(gè)網(wǎng)頁(yè),實(shí)現(xiàn)如下圖形式計(jì)算器
具體要求:
有且只有一個(gè)文件:index.html。不允許再有其他文件,不允許再有多帶帶的CSS、JS、PNG、JPG文件。
運(yùn)行環(huán)境為 Google Chrome。
必須支持標(biāo)準(zhǔn)的四則運(yùn)算。例如:1+2*3=7。
請(qǐng)?jiān)谑盏洁]件的48小時(shí)內(nèi)獨(dú)立完成本測(cè)試,并回復(fù)本郵件。
一道筆試題引發(fā)的一個(gè)練手項(xiàng)目花了一點(diǎn)時(shí)間寫好的第一版,符合了筆試題的要求。后來左看右看覺得還可以改進(jìn)做的更好,于是給它不斷的改進(jìn),加新功能等,這樣下來沒完沒了,利用業(yè)余時(shí)間一點(diǎn)一點(diǎn)的寫,從剛開始的網(wǎng)頁(yè)版,到后來做響應(yīng)式的移動(dòng)版,再到現(xiàn)在的移動(dòng)App,短短續(xù)續(xù)大概寫了3個(gè)月吧。
項(xiàng)目地址最終版的計(jì)算器,項(xiàng)目地址和預(yù)覽圖片在 GitHub:https://github.com/dunizb/sCalc。
功能說明最終版的功能如下:
界面布局采用CSS3 的 Flex box布局
內(nèi)置兩套主題可切換
計(jì)算歷史記錄顯示
左滑右滑可以切換單手模式(App)
當(dāng)輸入手機(jī)號(hào)碼后長(zhǎng)按等于號(hào)可以撥打手機(jī)號(hào)碼(App)
版本更新檢查(App)
界面布局
由于這個(gè)項(xiàng)目只是練手,所以采用了HTML5個(gè)CSS3技術(shù),也不打算兼容IE等低版本瀏覽器,所以直接使用CSS3提供的Flexbox布局方式。并且使用rem單位來進(jìn)行自動(dòng)計(jì)算尺寸。
計(jì)算計(jì)算歷史記錄顯示功能,使用HTML5提供的本地存儲(chǔ)功能之Local Storage,為了方便使用Local Storage,對(duì)它進(jìn)行了簡(jiǎn)單的封裝(見js/common.js文件)使之key值按一定規(guī)律生產(chǎn),方便管理。
key由appName+id組成,id是自動(dòng)增長(zhǎng)不重復(fù)的,可以按id和appName刪除一條記錄,輸入*則全部刪除。
打包APP
移動(dòng)Web版計(jì)算器寫完后,又想把他做成APP在手機(jī)上運(yùn)行,由于本人沒用過混合APP諸如ionic之類的框架,所以參考了一下,選擇了Hbuild來進(jìn)行開發(fā)和APP的打包,非常方便。(HBuild).
單手模式
左滑右滑可以切換單手模式,這就需要移動(dòng)端的touch事件了,使用如下代碼判斷是左滑還是又滑:
/** 單手模式 */ function singleModel(){ var calc = document.getElementById("calc"); var startX = 0,moveX = 0,distanceX = 0; var distance = 100; var width = calc.offsetWidth; //滑動(dòng)事件 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%,這樣就實(shí)現(xiàn)了左滑計(jì)算器縮小移動(dòng)到左下角。右滑道理一樣。
電話撥打功能
當(dāng)輸入手機(jī)號(hào)碼后長(zhǎng)按等于號(hào)可以撥打手機(jī)號(hào)碼。這個(gè)功能沒什么神奇,在移動(dòng)Web上會(huì)對(duì)那些看起來像是電話號(hào)碼的數(shù)字處理為電話鏈接,比如:
7位數(shù)字,形如:1234567
帶括號(hào)及加號(hào)的數(shù)字,形如:(+86)123456789
雙連接線的數(shù)字,形如:00-00-00111
11位數(shù)字,形如:13800138000
可能還有其他類型的數(shù)字也會(huì)被識(shí)別。我們可以通過如下的meta來開啟電話號(hào)碼的自動(dòng)識(shí)別:
開啟電話功能
123456
開啟短信功能:
123456
但是,在Android系統(tǒng)上,只能調(diào)用系統(tǒng)的撥號(hào)界面,在iOS上則能調(diào)過這一步直接把電話撥打出去。
版本更新檢查
在關(guān)于頁(yè)面,有一個(gè)版本更新檢查按鈕,就能檢查是否有新版本,這個(gè)功能的原理是發(fā)送一個(gè)JSOPN請(qǐng)求去檢查服務(wù)器上的JSON文件,比對(duì)版本號(hào),如果服務(wù)器上的版本比APP的版本高則會(huì)提示有新版本可以下載。
客戶端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 = " 正在檢查新版本..."; }, 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+"】,是否立即下載? 更新日志: " + log)){ var a = document.getElementById("telPhone"); a.href = downloadUrl; a.target = "_blank"; a.click(); } }else{ alert("你很潮哦,當(dāng)前已經(jīng)是最新版本!"); } _this.innerHTML = " 檢查新版本"; }, error:function(msg){ _this.innerHTML = " 檢查新版本"; alert("檢查失敗:"+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.新增切換主題功能 2.新增單手切換模式功能 3.調(diào)整UI " } ]下個(gè)版本計(jì)劃
當(dāng)前3.1.0版本還存在一些問題:
由于JS本身存在計(jì)算浮點(diǎn)數(shù)精度丟失問題,所以這個(gè)問題在項(xiàng)目中同意存在,需要自己去處理這個(gè)問題
由于使用了第三方的天氣接口,用了jquery.Ajax方法,所以違背了使用純?cè)鷮懙某踔浴?/p>
所以下個(gè)版本的開發(fā)計(jì)劃為:
解決浮點(diǎn)數(shù)計(jì)算精度問題
把獲取天氣信息的jquery.Ajax方法替換為原生JavaScript代碼,自己封裝JSONP請(qǐng)求函數(shù)
使用面向?qū)ο蠓绞街貥?gòu)APP
歡迎大家到github上來看看,如果喜歡可以star、watch一下,或提issue。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/50071.html
摘要:不允許再有其他文件,不允許再有單獨(dú)的文件。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。請(qǐng)?jiān)谑盏洁]件的小時(shí)內(nèi)獨(dú)立完成本測(cè)試,并回復(fù)本郵件。項(xiàng)目地址最終版的計(jì)算器,項(xiàng)目地址和預(yù)覽圖片在。并且使用單位來進(jìn)行自動(dòng)計(jì)算尺寸。 一道筆試題 之前偶然看到一個(gè)公司的筆試題,題目如下: 用HTML5、CSS3、JavaScript,做一個(gè)網(wǎng)頁(yè),實(shí)現(xiàn)如下圖形式計(jì)算器 showImg(https://segmentfault....
摘要:不允許再有其他文件,不允許再有單獨(dú)的文件。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。請(qǐng)?jiān)谑盏洁]件的小時(shí)內(nèi)獨(dú)立完成本測(cè)試,并回復(fù)本郵件。項(xiàng)目地址最終版的計(jì)算器,項(xiàng)目地址和預(yù)覽圖片在。并且使用單位來進(jìn)行自動(dòng)計(jì)算尺寸。 一道筆試題 之前偶然看到一個(gè)公司的筆試題,題目如下: 用HTML5、CSS3、JavaScript,做一個(gè)網(wǎng)頁(yè),實(shí)現(xiàn)如下圖形式計(jì)算器 showImg(https://segmentfault....
Web前端開發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!(表單標(biāo)簽)html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
Web前端開發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!(表單標(biāo)簽)html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
閱讀 3933·2021-09-22 10:02
閱讀 3365·2019-08-30 15:52
閱讀 3061·2019-08-30 12:51
閱讀 754·2019-08-30 11:08
閱讀 2065·2019-08-29 15:18
閱讀 3106·2019-08-29 12:13
閱讀 3592·2019-08-29 11:29
閱讀 1872·2019-08-29 11:13