用js实现简单计算器方法

用js实现简单计算器方法

<style>
  .div1 {
    width: 208px;
    height: 308px;
    margin: auto;
    border: 2px solid #000000;
    font-size: 0;
  }
  .div2 {
    width: 208px;
    height: 100px;
    font-size: 20px;
  }
  .div1 span {
    display: inline-block;
    width: 50px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #cccccc;
  }
</style>

<div class="div1">
  <div class="div2"></div>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>*</span>
  <span>0</span>
  <span>c</span>
  <span>=</span>
  <span>/</span>
</div>
<script>
  // 写一个计算器  0，1，2，3，4，5，6，7，8，9，+，-，*，/,C,=
  // 执行初始化函数
  init();
  // 创建初始化函数
  function init() {
    //   根据选择器获取标签中找到的.div1
    var div1 = document.querySelector(".div1");
        // 根据选择器获取页面中的所有span
    var spans = document.querySelectorAll("span");
    // 利用for循环给每个span添加点击事件
    for (i = 0; i < spans.length; i++) {
      spans[i].addEventListener("click", clickHandler);
    }
  }
//   创建点击事件要执行的函数
  function clickHandler(e) {
    //   根据选择器获取要找的元素.div2
    var div2 = document.querySelector(".div2");
    if (e.target.textContent) {
        // 如果被点击元素是c时
      if (e.target.textContent === "c") {
        //   则设置div2中的所有内容清空
        div2.textContent = null;
        // 如果被点击元素是=时
      } else if (e.target.textContent === "=") {
        //   则把内容转换为字符串
        var obj = String(div2.textContent);
        // 打印字符串
        console.log(obj)
        if (obj) {
            // 查找字符串中有没有+
          if (obj.indexOf("+")!==-1) {
            //   console.log(obj.split("+")[1])
            // 如果有则把+号两边转换为数值计算两边想加的结果
            div2.textContent =
              (Number(obj.split("+")[0]) + Number(obj.split("+")[1]));
          }
        //   查找字符串中有没有-
          if (obj.indexOf("-")!==-1) {
            console.log(obj.split("-")[1])
            // console.log(obj.split("-")[1]);
            // 如果有则把-两边转换为数值计算两边相减的直
            div2.textContent =
            (Number(obj.split("-")[0]) - Number(obj.split("-")[1]));
          }
        //   查找字符中有没有*
          if (obj.indexOf("*")!==-1) {
            console.log(obj.split("*")[1]);
            // 如果有则计把*两边转换为数值计算两边相乘的结果
             div2.textContent =
             (Number(obj.split("*")[0]) * Number(obj.split("*")[1]));
          }
        //   查找字符串中有没有/
          if (obj.indexOf("/")!==-1) {
            console.log(obj.split("/")[1]);
            // 如果有则把/两边转换为数值计算两边相除的结果
            div2.textContent =
            (Number(obj.split("/")[0]) / Number(obj.split("/")[1]));
          }
        }
      } else {
        //   把每次点击的内容添加在div2中
        div2.textContent += e.target.textContent;
      }
    }
  }
</script>