用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">7div>
        <div class="bn">8div>
        <div class="bn">9div>
        <div class="bn">*div>
        <div class="bn">4div>
        <div class="bn">5div>
        <div class="bn">6div>
        <div class="bn">-div>
        <div class="bn">1div>
        <div class="bn">2div>
        <div class="bn">3div>
        <div class="bn">+div>
        <div class="bn">0div>
        <div class="bn">Cdiv>
        <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这样就不行。