ネイティブ JavaScript を使用した Web 計算機の実装

この記事では、参考までに、計算機のWebバージョンを実装するためのJavaScriptの具体的なコードを共有します。具体的な内容は次のとおりです。

暇だったのでパソコンのシステムソフトウェアを見ていたら、電卓機能を見つけたので、この電卓の機能について簡単に書きます。この電卓のウェブ版には基本的な機能がすべて備わっていますが、あまり完全ではないので、参考用です。

まず、Web 計算機のスタイルを手動で記述したくない場合は、コピーするだけで済みます。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
 
        .cal {
            幅: 420ピクセル;
            マージン: 100px 自動;
            背景色: #E6E6E6;
 
            パディング: 2px;
            オーバーフロー: 非表示;
        }
 
 
        。見せる {
            位置: 相対的;
            幅: 416ピクセル;
            高さ: 120px;
 
            フォントサイズ: 50px;
            行の高さ: 50px;
            フォントの太さ: 700;
        }
 
        .表示ボタン{
            表示: なし;
 
            位置: 絶対;
            上: -2px;
            右: -2px;
 
            幅: 60ピクセル;
            高さ: 40px;
            行の高さ: 40px;
            テキスト配置: 中央;
            境界線: 透明;
            背景色: #E6E6E6;
 
            フォントサイズ: 30px;
            フォントの太さ: 100;
            カーソル: ポインタ;
        }
 
        .show ボタン:ホバー {
            背景色: #e81123;
            色: #f0f0f0
        }
 
        .res、
        。左、
        。右 {
            位置: 絶対;
            下部: 0;
 
            高さ: 60px;
            行の高さ: 60px;
            パディング: 0 3px;
        }
 
        .res {
            右: 0;
            /* 幅: 100%; */
 
            テキスト配置: 右;
        }
 
        。左 {
            表示: なし;
            背景色: #E6E6E6;
        }
 
        。右 {
            表示: なし;
            右: 0;
            背景色: #E6E6E6;
        }
 
        .left:ホバー、
        .right:hover {
            色: #2e8eda;
        }
 
        .キーボード{
            ディスプレイ: フレックス;
            flex-wrap: ラップ;
            コンテンツの中央揃え: 中央;
        }
 
 
 
        .btn{
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
 
            幅: 100ピクセル;
            高さ: 60px;
            行の高さ: 60px;
            マージン: 2px;
 
            背景色: #f0f0f0;
            境界線: 透明;
 
            フォントサイズ: 大きい;
        }
 
        .btn:ホバー{
            背景色: #d6d6d6;
        }
 
        .デジタル{
            背景色: #fafafa;
            フォントの太さ: 700;
        }
 
        。等しい {
            背景色: #8abae0;
        }
 
        .equal:hover {
            背景色: #4599db;
        }
    </スタイル>
</head>
 
<本文>
 
    <div class="cal">
        <div class="show">
            <button class="close">×</button>
            <div class="res">0</div>
            <div class="left">&lt;</div>
            <div class="right">&gt;</div>
        </div>
        <div class="キーボード">
            <!-- 0 -->
            <button class="btn percent">%</button>
            <!-- 1 -->
            <button class="btn clearOne">CE</button>
            <!-- 2 -->
            <button class="btn clearAll">C</button>
            <!-- 3 -->
            <button class="btn back">削除</button>
            <!-- 4 -->
            <button class="btn div1">1/x</button>
            <!-- 5 -->
            <button class="btn square">x²</button>
            <!-- 6 -->
            <button class="btn sqrt">²√x</button>
            <!-- 7 -->
            <button class="btn div">÷</button>
            <!-- 8 -->
            <button class="btn digital">7</button>
            <!-- 9 -->
            <button class="btn digital">8</button>
            <!-- 10 -->
            <button class="btn digital">9</button>
            <!-- 11 -->
            <button class="btn mul">×</button>
            <!-- 12 -->
            <button class="btn digital">4</button>
            <!-- 13 -->
            <button class="btn digital">5</button>
            <!-- 14 -->
            <button class="btn digital">6</button>
            <!-- 15 -->
            <button class="btn sub">-</button>
            <!-- 16 -->
            <button class="btn digital">1</button>
            <!-- 17 -->
            <button class="btn digital">2</button>
            <!-- 18 -->
            <button class="btn digital">3</button>
            <!-- 19 -->
            <button class="btn add">+</button>
            <!-- 20 -->
            <button class="btn neg">+/-</button>
            <!-- 21 -->
            <button class="btn digital">0</button>
            <!-- 22 -->
            <button class="btn digital">.</button>
            <!-- 23 -->
            <button class="btn equal">=</button>
        </div>
    </div>
    <script src="./computer.js"></script>
</本文>
 
</html>

js部分:

const bt = document.querySelectorAll('.キーボードボタン')
const close = document.querySelector('.close')
定数 res = document.querySelector('.res')
//数字がクリックされたら、k = 0 にします
一つにしましょう
2つにしましょう
関数 arr(num) {
    bt[num].onclick = 関数（）{
        res.innerText += bt[num].innerText
        res.innerText = parseFloat(res.innerText)
        // コンソール.log(1)
 
    }
}
//小数点 //結果の小数点を保持する function fn() {
    （res.innerText.length > 8）の場合{
        res.innerText = res.innerText.slice(0, 10)
    }
    res.innerText == 'NaN'の場合{
        res.innerText = 0
    }
 
}
 
//演算子をクリックすると、関数 symbol(str, fu) {
    bt[str].onclick = 関数（）{
        キロ++
        (k > 1) の場合 {
            戻る
        }
        1 = parseFloat(res.innerText)
        // スイッチ (fu) {
        // '+' の場合:
        // 1 += 1
        // 壊す;
        // 場合 '-'：
        // 1 -= 1
        // 壊す;
        // 場合 '*'：
        // 1 *= 1
        // 壊す;
        // 場合 '/'：
        // 1 /= 1
        // 壊す;
        // }
        res.innerText = ''
        close.style.display = 'ブロック'
        close.innerText = bt[str].innerText
        コンソール.log(1)
    }
}
 
アー(21)
アー(18)
アー(17)
アー(16)
アー(14)
アー(13)
アー(12)
アー(10)
アー(9)
アール(8)
アー(22)
//演算シンボル symbol(0)
シンボル(7, '/')
シンボル(11, '*')
シンボル(15, '-')
シンボル(19, '+')
コンソール.log(bt[22].innerText)
bt[22].onclick = 関数（）{
    res.innerText += bt[22].innerText
    コンソールログ(565)
}
bt[23].onclick = 関数（）{
    2 = parseFloat(res.innerText)
    スイッチ (close.innerText) {
        場合 '％'：
            // toFixed(11) は小数点以下11桁を保持します res.innerText = one % two
            0 = 0 です
            壊す;
        ケース '+':
            res.innerText = 1 + 2
            0 = 0 です
            壊す;
        場合 '-'：
            res.innerText = 1 - 2 つ
            0 = 0 です
            壊す;
        ケース 'x':
            res.innerText = 1 * 2
            0 = 0 です
            壊す;
        ケース '÷':
            res.innerText = 1 / 2 です
            0 = 0 です
            壊す;
    }
    // コンソールログ(res.innerText.length)
    関数()
 
 
}
bt[1].onclick = 関数（）{
    res.innerText = ''
}
bt[2].onclick = 関数（）{
    res.innerText = '0'
    close.innerText = 'x'
    close.style.display = ''
    1 = 0
    2 = 0
}
bt[3].onclick = 関数（）{
    res.innerText = res.innerText.slice(0, res.innerText.length - 1)
    （res.innerText.length === 0）の場合{
        res.innerText = '0'
        戻る
    }
}
bt[4].onclick = 関数（）{
    res.innerText = 1 / parseFloat(res.innerText)
    関数()
}
bt[5].onclick = 関数（）{
    res.innerText = parseFloat(res.innerText) * parseFloat(res.innerText)
    関数()
}
 
bt[6].onclick = 関数（）{
    res.innerText = Math.sqrt(parseFloat(res.innerText))
    関数()
}
bt[20].onclick = 関数（）{
    res.innerText = 0 - parseFloat(res.innerText)
    関数()
}

上記のコードで簡単なコンピュータが作れます。皆様の勉強のお役に立てれば幸いです。また、皆様の123WORDPRESS.COMへの応援もよろしくお願いします。

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