シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。

最近、ブロガーは退屈していたので、js を使用して簡単な計算機を作成しました (ブロガーはフロントエンドではなく、バックエンドで作業しています >_<)。実際、フロントエンドの作業はとても楽しいです。自分で何かを作るのはとても充実感があります。さっそく、ソースコードをご紹介します。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>電卓</title>
        <スタイル>
            #b1{
                テキスト配置: 中央;
                背景色: 水色;
                幅: 650ピクセル;
                高さ: 650px;
                境界線: 1px 黒一色;
                左マージン: 400px;
                境界線の半径: 18px;

            }
            #b2{
                テキスト配置: 中央;
                幅: 300ピクセル;
                高さ: 80px;
                上マージン: 30px;
                フォントファミリ: "Microsoft YaHei";
                フォントサイズ: 20px;
                境界線の半径: 8px;
                アウトライン:なし;
            }
            ul{
                リストスタイルタイプ: なし;

            }
            li{
                フロート: 左;
                左マージン: 40px;
                上マージン: 30px;
            }
            li 入力{
                幅: 100ピクセル;
                高さ: 50px;
                境界線の半径: 8px;
                フォントファミリ: "Microsoft YaHei";
                フォントサイズ: 20px;
                アウトライン:なし;
            }
        li 入力:ホバー{
                背景色:赤;
            }
        </スタイル>

        <スクリプト>
        var beforeNum = 0;
        関数 addNum(a){
             beforeNum=document.getElementById("b2").value;
             var nowNum=beforeNum;
            if(beforeNum!=0){
             nowNum=beforeNum+a;    
            }それ以外{
                if(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)=="."){
                    nowNum=beforeNum+a; 
                }
                 if(a!="+"&&a!="-"&&a!="*"&&a!="/"&&(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)!=".")){
                 nowNum=a;  
                }
            }
            document.getElementById("b2").value=nowNum;
        }


        関数 jisuan(){
            document.getElementById("b2").value=eval(document.getElementById("b2").value);
        }

        関数clearNum(){
            ドキュメントの要素IDを取得する("b2")。値=0;
        }

        関数 backAgain(){
            beforeNum=document.getElementById("b2").value;
            if(beforeNum.length!=1){
            document.getElementById("b2").value=beforeNum.substring(0,beforeNum.length-1);
            }そうでない場合(beforeNum.length==1){
                ドキュメント.getElementById("b2").value=0;
            }
        }
        関数addPoint(b){
            beforeNum=document.getElementById("b2").value;
            if((beforeNum.indexOf(".")!=beforeNum.length-1)){
                document.getElementById("b2").value=beforeNum+b;
            }
        }
        関数 offCl(){
            document.getElementById("b2").value="";
        }
        </スクリプト>
    </head>
    <本文>
        <div id="b1">
            <p style="font-size: 20px;">オンラインのシンプルな計算機</p>
            <div><input id="b2" name="wenben" value="0"/></div>
            <div>
                <ul>

                    <li><input type="button" value="1" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="2" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="3" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="4" onclick="addNum(this.value);"/></li>
                    </ul>
                <ul>
                    <li><input type="button" value="5" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="6" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="7" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="8" onclick="addNum(this.value);"/></li>
                    </ul>
                <ul>
                    <li><input type="button" value="9" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="0" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="+" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="-" onclick="addNum(this.value);"/></li>
                </ul>
                    <ul>
                    <li><input type="button" value="*" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="/" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="." onclick="addPoint(this.value);"/></li>
                    <li><input type="button" value="=" onclick="jisuan();"/></li>
                </ul>
                </ul>
                    <ul>
                    <li><input type="button" value="戻る" onclick="backAgain();"/></li>
                    <li><input type="button" value="クリア" onclick="clearNum();"/></li>
                    <li><input type="button" value="シャットダウン" onclick="offCl();"/></li>
                </ul>
            </div>
        </div>
    </本文>
</html>

コード実行の効果図。