人妻少妇乱子伦精品_日韩人妻潮喷视频网站_日本最新最全无码不卡免费_日韩AV无码中文

當(dāng)前位置: 首頁 > 科技新聞 >

絕對干貨！純用HTML+CSS+JS 編寫的計(jì)算器應(yīng)用

時(shí)間:2020-06-23 17:42來源:網(wǎng)絡(luò)整理 瀏覽:次
一道筆試題之前偶然看到一個(gè)公司的筆試題，題目如下：用HTML5、CSS3、JavaScript，做一個(gè)網(wǎng)頁，實(shí)現(xiàn)如下圖形式計(jì)算器具體要求：有
一道筆試題

之前偶然看到一個(gè)公司的筆試題，題目如下：

用HTML5、CSS3、JavaScript，做一個(gè)網(wǎng)頁，實(shí)現(xiàn)如下圖形式計(jì)算器

絕對干貨！純用HTML+CSS+JS 編寫的計(jì)算器應(yīng)用

具體要求：

有且只有一個(gè)文件：index.html。不允許再有其他文件，不允許再有單獨(dú)的CSS、JS、PNG、JPG文件。運(yùn)行環(huán)境為 Google Chrome。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。例如：1+2*3=7。請?jiān)谑盏洁]件的48小時(shí)內(nèi)獨(dú)立完成本測試，并回復(fù)本郵件。一道筆試題引發(fā)的一個(gè)練手項(xiàng)目

花了一段時(shí)間寫好的第一版，符合了筆試題的要求。后來左看右看覺得還可以改進(jìn)做的更好，于是給它不斷的改進(jìn)，加新功能等，這樣下來沒完沒了，利用業(yè)余時(shí)間一點(diǎn)一點(diǎn)的寫，從剛開始的網(wǎng)頁版，到后來做響應(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ī)號碼后長按等于號可以撥打手機(jī)號碼(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，對它進(jìn)行了簡單的封裝（見js/common.js文件）使之key值按一定規(guī)律生產(chǎn)，方便管理。

絕對干貨！純用HTML+CSS+JS 編寫的計(jì)算器應(yīng)用

key由appName+id組成，id是自動(dò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ī)號碼后長按等于號可以撥打手機(jī)號碼。這個(gè)功能沒什么神奇，在移動(dòng)Web上會(huì)對那些看起來像是電話號碼的數(shù)字處理為電話鏈接，比如：

7位數(shù)字，形如：1234567帶括號及加號的數(shù)字，形如：(+86)123456789雙連接線的數(shù)字，形如：00-00-0011111位數(shù)字，形如：13800138000

可能還有其他類型的數(shù)字也會(huì)被識別。我們可以通過如下的meta來開啟電話號碼的自動(dòng)識別：

<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)于頁面，有一個(gè)版本更新檢查按鈕，就能檢查是否有新版本，這個(gè)功能的原理是發(fā)送一個(gè)JSOPN請求去檢查服務(wù)器上的JSON文件，比對版本號，如果服務(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 = "<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("檢查失?。?#34;+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 "
    }
]
下個(gè)版本計(jì)劃

當(dāng)前3.1.0版本還存在一些問題：

由于JS本身存在計(jì)算浮點(diǎn)數(shù)精度丟失問題，所以這個(gè)問題在項(xiàng)目中同意存在，需要自己去處理這個(gè)問題由于使用了第三方的天氣接口，用了jquery.Ajax方法，所以違背了使用純原生寫的初衷。

所以下個(gè)版本的開發(fā)計(jì)劃為：

解決浮點(diǎn)數(shù)計(jì)算精度問題把獲取天氣信息的jquery.Ajax方法替換為原生JavaScript代碼，自己封裝JSONP請求函數(shù)使用面向?qū)ο蠓绞街貥?gòu)APP絕對干貨！純用HTML+CSS+JS 編寫的計(jì)算器應(yīng)用

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學(xué)習(xí)資料，只要私信：“前端"等3秒后即可獲取地址，里面概括應(yīng)用網(wǎng)站開發(fā)，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個(gè)知識點(diǎn)高級進(jìn)階干貨的相關(guān)視頻資料，等你來拿

推薦內(nèi)容