JavaScript を使用した Web 計算機の作成

この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載しています。具体的な内容は次のとおりです。

簡単に言うと、コードは次のようになります。

まず HTML コードです:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>js を使用して Web 計算機を実装する</title>
    <link rel="スタイルシート" href="cal.css" >
</head>
<本文>
<div id="コンテナ" class="コンテナ">
    <input id="結果" class="結果">
    <div id="cal" class="clearfix">
        <div id="num" class="fl">
            <div id="top" class="clearfix">
                <input id="クリア" type="ボタン" 値="C">
                <input id="antonyms" type="button" value="+/-">
                <input id="残り" type="button" value="%">
            </div>
            <div id="bonttom" class="clearfix">
                <入力タイプ="ボタン" 値="7">
                <入力タイプ="ボタン" 値="8">
                <入力タイプ="ボタン" 値="9">
                <入力タイプ="ボタン" 値="4">
                <入力タイプ="ボタン" 値="5">
                <入力タイプ="ボタン" 値="6">
                <入力タイプ="ボタン" 値="1">
                <入力タイプ="ボタン" 値="2">
                <入力タイプ="ボタン" 値="3">
                <input class="zero" type="button" value="0">
                <input type="button" value=".">
            </div>
        </div>
        <div id="math" class="fr math">
            <input type="button" value="/" onclick="onclicknum('/')">
            <input type="button" value="＊" onclick="onclicknum('*')">
            <input type="button" value="＋" onclick="onclicknum('+')">
            <input type="button" value="－" onclick="onclicknum('-')">
        </div>
        <input id="res" type="button" value="＝">
    </div>
</div>
</本文>
</html>

次は CSS スタイルコードです。

* {
    マージン: 0px;
    パディング: 0px;
}

.clearfix:before、.clearfix:after {
    コンテンツ： '';
    表示: ブロック;
}

.clearfix:後{
    クリア: 両方;
}

.clearfix {
    _ズーム: 1;
}

入力{
    表示: ブロック;
}

。容器 {
    幅: 240ピクセル;
    高さ: 400px;
    境界線: 2px 実線 #eb4509;
    マージン: 100px 自動;
}

.fl {
    フロート: 左;
}

.fr {
    フロート: 右;
}

入力{
    幅: 60ピクセル;
    高さ: 60px;
    境界線: 1px実線 #000;
    フロート: 左;
    背景: #ddd;
    フォントサイズ: 24px;
    色: #eb4509;
    -webkit-box-sizing: 境界線ボックス;
    -moz-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
}

.math 入力 {
    フロート: なし;
}

入力.ゼロ{
    幅: 120ピクセル;
}

#番号{
    幅: 180ピクセル;
}

#cal #math {
    幅: 60ピクセル;
}

。結果 {
    幅: 100%;
    高さ: 100px;
    行の高さ: 100px;
    境界線: なし;
    背景色: #dfdfdf;
    フォントサイズ: 30px;
    フロート: なし;
    アウトライン: なし;
    テキスト配置: 右;
    右パディング: 20px;
    -webkit-box-sizing: 境界線ボックス;
    -moz-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
}

最後に、js コード:

<script type="text/javascript">
    var 数値結果;
    var 文字列;

    var フラグ;
    var bot = document.getElementById("bonttom");
    var botInputs = bot.getElementsByTagName("入力");
    var clear = document.getElementById("clear");
    var res = document.getElementById("res");
    var math = document.getElementById("math");
    var mathInputs = math.getElementsByTagName("入力");
    var antonymsBtn = document.getElementById("antonyms");
    var 残りBtn = document.getElementById("残り");


    //数字をクリックして、加算、減算、乗算、除算を実行します。 imporIn(botInputs);
// 数学入力をインポートします。

    関数imporIn(eles) {
        (var i = 0; i < eles.length; i++) の場合 {
            eles[i].onclick = 関数 () {
                onclicknum(この値);
            }
        }
    }

    //cボタンをクリアするにはクリックします clear.onclick = function () {
        クリッククリア();
    }

    //=記号をクリックして結果を取得します res.onclick = function () {
        クリック結果();
    }

    //+/-をクリック
    antonymsBtn.onclick = 関数 () {
        反意語();
    }

    //クリック ％
    残りBtn.onclick = 関数（）{
        残り();
    }

    関数 onclicknum(nums) {
        if (フラグ) {
            console.log("num=" + 数値);
            if (数値 !== "/" && 数値 !== "+" && 数値 !== "-" && 数値 !== "*") {
                str.value = "";

                console.log("aa" + 数値);
            }
        }
        フラグ = false;
        str = document.getElementById("結果");
        str.value = str.value + nums;
    }

    //クリア関数 onclickclear() {
        str = document.getElementById("結果");
        str.value = "";
    }

    //結果を取得する関数 onclickresult() {
        str = document.getElementById("結果");
        numresult = eval(str.value);
        str.value = numresult;
        フラグ = true;
    }

    //正と負の数関数antonyms() {
        str = document.getElementById("結果");
        str.値 = -str.値;
    }

    //%
    関数の剰余() {
        str = document.getElementById("結果");
        str.値 = str.値 / 100;
    }
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: