用JS點選事件做一個簡單的計算器

用JS的點選事件和事件委託做一個簡單的計算器（加減乘除，清除），下面就是計算器的樣子，這裡主要是用js，樣式就隨便設定，可能有點醜了；
首先大概寫出計算器的樣子，簡單設定一下樣式

<style>
        .icon {
            width: 500px;
            height: 600px;
            border: 1px solid #000000;
            position: relative;
            margin: 100px auto;
        }

        .show {
            width: 350px;
            height: 60px;
            border: 1px solid #000000;
            margin: 20px auto;
            text-align: center;
            line-height: 70px;
        }

        .bn {
            float: left;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            font-size: 20px;
            text-align: center;
            line-height: 80px;
            font-weight: bold;
            border: 1px solid #000000;
            margin: 20px;
        }
    </style>
	<div class="icon">
        <div class="show"></div>
        <div class="bn">7</div>
        <div class="bn">8</div>
        <div class="bn">9</div>
        <div class="bn">*</div>
        <div class="bn">4</div>
        <div class="bn">5</div>
        <div class="bn">6</div>
        <div class="bn">-</div>
        <div class="bn">1</div>
        <div class="bn">2</div>
        <div class="bn">3</div>
        <div class="bn">+</div>
        <div class="bn">0</div>
        <div class="bn">C</div>
        <div class="bn">/</div>
        <div class="bn">=</div>
    </div>

下面為JS程式碼，以自己的理解簡單加了點註釋

<script>
        var show, icon;
        var value1 = "";
        var value2 = "";
        var type = "";

        init();

        function init() {
            //獲取元素
            show = document.querySelector(".show");
            icon = document.querySelector(".icon");
            //給icon新增點選事件，所有子元素事件委託給父元素icon
            icon.addEventListener("click", clickHandler);
        }

        function clickHandler(e) {
            //e.target為點選的目標元素；如果點選元素的class名不是bn時就跳出函式
            //點選的不是計算器裡面的內容時就跳出
            if (e.target.className !== "bn") return;
            //判斷點選目標元素的文字是不是非數值
            if (isNaN(e.target.textContent)) {
                // 是非數值就執行setType函式
                setType(e.target);
            } else {
                // 是數值就執行setValue函式
                setValue(e.target);
            }
            //給show元素設定文字內容，type=""時，顯示內容就為已經轉換為數值的value1，如	   		果type有內容（+ - * /等）,那麼顯示內容為value1+type+已經轉換為數值value2
            show.textContent = value1 + (type === "" ? "" : type + value2);
        }

        //建立setValue函式，處理點選目標元素是數值的情況
        function setValue(elem) {
            //點選時，如果type=""，把點選的數字內容轉換為數字賦值給value1
            if (type === "") {
                value1 += elem.textContent;
                value1 = Number(value1);
            }
            //type不是空字串的時候，把點選的數字內容轉換為數字賦值給value2
            else {
                value2 += elem.textContent;
                value2 = Number(value2);
            }
        }
        //建立setType函式，處理點選目標元素是非數值的情況
        function setType(elem) {
            //判斷元素的文字內容
            switch (elem.textContent) {
                //如果文字內容是+,-,*,/, 就將內容賦予type
                case "+":
                case "-":
                case "*":
                case "/":
                    type = elem.textContent;
                    break;
                //如果文字內容是C，那麼將三個變數都設定為空字串，清空內容
                case "C":
                    value1 = "";
                    value2 = "";
                    type = "";
                    break;
                //如果文字內容是=，執行函式count計算
                case "=":
                    count();
                    break;
            }
        }

        //計算函式
        function count() {
            var sum = 0;
            switch (type) {
                case "+":
                    sum = Number(value1) + Number(value2);
                    break;
                case "-":
                    sum = value1 - value2;
                    break;
                case "*":
                    sum = value1 * value2;
                    break;
                case "/":
                    sum = value1 / value2;
                    break;
            }
            //完成一次計算後，將sum值賦值給value1 在show元素裡顯示出來，然後把value2和type清除,這樣就可以繼續點選進行計算
            value1 = sum;
            value2 = "";
            type = "";
        }
</script>

這樣我們就完成了一個簡單的計算器，功能僅限兩個數字的加減乘除和清除，不能連著幾個數字運算，例如3+2+4這樣就不行。