純粋な HTML+CSS+JavaScript で書かれた電卓アプリケーション

筆記試験の問題

以前、ある企業の筆記試験の問題を偶然見ました。その質問は次のとおりです。

HTML5、CSS3、および JavaScript を使用して、次の形式の電卓を実装する Web ページを作成します。下の画像

特定の要件:

1. ファイルは 1 つだけあります:index.html。他のファイルは許可されず、個別の CSS、JS、PNG、JPG ファイルも許可されません。

2. 実行環境はGoogle Chromeです。

3. 標準の四則演算をサポートする必要があります。例: 1+2*3=7。

4. メール受信後 48 時間以内にこのテストを個別に完了し、このメールに返信してください。

筆記試験問題をきっかけとした練習プロジェクト

筆記試験問題の要件を満たす最初のバージョンを書くのに時間がかかりました。その後、いろいろ調べてみると、もっと改善できると感じたので、改良したり、新しい機能を追加したり、という作業を延々と続けました。空いた時間を利用して、Web 版から少しずつ書きました。その後、レスポンシブなモバイル版を作成し、現在のモバイルアプリを作成するのに約 3 か月かかりました。

プロジェクト アドレス

計算機の最終バージョン、プロジェクト アドレス、プレビュー イメージは GitHub: https://github.com/dunizb/sCalc にあります。

機能説明

最終版の機能は以下の通りです:

• インターフェイスレイアウトはCSS3フレックスボックスレイアウトを採用

• 2組の内蔵テーマを切り替え可能

• 計算履歴表示

• 左右にスワイプすると片手モードに切り替えることができます(アプリ)

• 携帯電話番号を入力後、等号を長押しして携帯電話番号にダイヤルします(アプリ)

• バージョン更新確認(アプリ)

インターフェースレイアウト

このため、このプロジェクトは練習用であるため、HTML5 CSS3技術を使用しています。IEなどの下位バージョンのブラウザとの互換性を意図していないため、 CSS3で提供されるフレックスボックスのレイアウト方法。また、レム単位を使用して寸法を自動的に計算します。

計算履歴表示機能は、HTML5が提供するLocal Storage機能を利用しており、Local Storageを使いやすくするために、キー値を生成できるように簡易カプセル化しています(js/common.jsファイルを参照)。管理に便利な特定のルール。

キーは appName+id で構成されます。id は自動的に増加し、重複しません。すべて削除するには、id と appName を入力します。

APP のパッケージ化

電卓のモバイル Web バージョンを作成した後、それを携帯電話で実行できる APP にしたいと思いました。ionic などのハイブリッド APP フレームワークを使用したことがなかったので、検討して Hbuild を選択しました。 APPの開発とパッケージ化に非常に便利です。 (HBuild)。

片手モード

片手モードに切り替えるには、次のコードを使用して、左にスライドするか再度スライドするかを決定します。

/** 单手模式 */
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 name="format-detection" content="telephone=yes" />

電話機能をオンにする

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

SMS 機能をオンにする:

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

ただし、Android システムでは、システム ダイヤル インターフェイスのみを呼び出すことができます。 iOS では電話をかけることができます。この手順の後、直接電話をかけます。

バージョン更新チェック

Aboutページには、新しいバージョンがあるかどうかを確認するためのバージョン更新チェックボタンがあります。この機能の原理は、JSOPNリクエストを送信してサーバー上のJSONファイルを確認することです。バージョン番号を比較します。サーバー上のバージョンがアプリのバージョンよりも高い場合は、新しいバージョンをダウンロードできることを示すメッセージが表示されます。

クライアント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+"】，是否立即下载？\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 "
    }
]