搜尋
首頁web前端js教程純 HTML+CSS+JavaScript 編寫的計算器應用

一道筆試題

之前偶然看到一個公司的筆試題,題目如下:

用HTML5、CSS3、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。

功能說明

最終版的功能如下:

  • 介面版面採用CSS3 的Flex box版面

  • 內建可以切換單手模式(App)

  • 當輸入手機號碼後長按等於號可以撥打手機號碼(App)

  • 版本更新檢查(App)

  • 版本更新檢查(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).

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

單手模式

左滑右滑可以切換單手模式,這就需要移動端的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:&#39;get&#39;,
            url:&#39;http://duni.sinaapp.com/demo/app.php?jsoncallback=?&#39;,
            dataType:&#39;jsonp&#39;,
            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+"】,是否立即下载?\n 更新日志:\n " + log)){
                        var a = document.getElementById("telPhone");
                        a.href = downloadUrl;
                        a.target = "_blank";
                        a.click();
                    }
                }else{
                    alert("你很潮哦,当前已经是最新版本!");
                }
                _this.innerHTML = " 检查新版本";
            },
            error:function(msg){
                _this.innerHTML = " 检查新版本";
                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 "
    }
]

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

自定義Google搜索API設置教程自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

示例顏色json文件示例顏色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期進行了最新信息和新示例。 在此JSON示例中,我們將研究如何使用JSON格式將簡單值存儲在文件中。 使用鍵值對符號,我們可以存儲任何類型的

10個jQuery語法熒光筆10個jQuery語法熒光筆Mar 02, 2025 am 12:32 AM

增強您的代碼演示文稿:10個語法熒光筆針對開發人員在您的網站或博客上共享代碼段的開發人員是開發人員的常見實踐。 選擇合適的語法熒光筆可以顯著提高可讀性和視覺吸引力。 t

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

8令人驚嘆的jQuery頁面佈局插件8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局:8 ESTISSEL插件jQuery大大簡化了網頁佈局。 本文重點介紹了簡化該過程的八個功能強大的JQuery插件,對於手動網站創建特別有用

10 JavaScript和JQuery MVC教程10 JavaScript和JQuery MVC教程Mar 02, 2025 am 01:16 AM

本文介紹了關於JavaScript和JQuery模型視圖控制器(MVC)框架的10多個教程的精選選擇,非常適合在新的一年中提高您的網絡開發技能。 這些教程涵蓋了來自Foundatio的一系列主題

什麼是這個&#x27;在JavaScript?什麼是這個&#x27;在JavaScript?Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象,但具體取決於函數的調用方式。 沒有當前對象時,this 指代全局對象。在 Web 瀏覽器中,它由 window 表示。 調用函數時,this 保持全局對象;但調用對象構造函數或其任何方法時,this 指代對象的實例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前,這句話可

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),