js简易计算器(2018-08-15)

学习是个不断探索的过程，不能放弃，还要保持心情。
昨天突发奇想的想要写一个计算器。但是完成基础部分后，对于实现功能却是很懵逼，就百度看了很多，但是对于别人的代码理解起来还是不太好。就开始写，但是却无思绪，不知道怎么获取点击的是哪一个数字什么的，开始就遇到了问题。接下来就是计算了，简单的加减乘除好实现，但是对于结果就总达不到预期的效果，写的删删改改很是困难。最终在晚上学长的提示下，用了eval函数，才简单的解决了问题，那接下来就总结一下吧。

---

实现的关键：

• 监听点击事件
  document.onclick 监听全部的点击事件
  document.getElementById("id").onclick 监听当前部分的点击事件
• 乘（x）除（÷）符号在计算中的正则更改，因为与计算机默认的 乘（*）除（/）不一样
• 点击获取的值及计算返回的值，都要展示在计算框内
• eval函数的理解使用
• 计算结果，点击等于（=）号展示结果
• 小数点的位数，一个数中，只能有一位小数
• 错误提示

---

这些都是实现过程中需要考虑到的问题，但是由于现在所学知识的浅薄，就只是实现了最简单的计算功能，以后再去完善这些可能出错的部分。
下面看下基础部分的代码：

<style>
*{
    margin: 0;
    padding: 0;
}
#container{
    width: 330px;
    height:270px;
    margin: 100px auto;
    padding: 20px 20px 9px;
    background-color: #9dd2ea;
    border-radius: 5px;
    box-shadow:  0 10px 15px rgba(0, 0, 0, 0.2);
}
#result,#count{
    overflow: hidden;
    margin-left: 8px;
}
#count span,#clear{
    width:66px;
    height: 40px;
    color: #FFFFFF;
    float: left;
    position: relative;
    background-color:#ff9fa8;
    box-shadow: 2px 5px 4px  rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    line-height: 36px;
    font-weight: bolder;
    font-size: 20px;
    margin: 6px;
}
#screen {
    width: 210px;
    height: 40px;
    position: relative;
    float: left;
    top:8px;
    margin-left: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    text-align: right;
    line-height: 40px;
    border-radius: 4px;
    font-size: 17px;
    font-weight: bold;
    box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
}
#count span{
    color: #676767;
    font-weight: bold;
    background-color: #FFFFFF;
}
#count span:hover{
    background-color: #b1b0ea;
}
span#sum{
    background-color: #ccea99;
}
span#sum:hover{
    background-color: #caea5d;
}
span#clear:hover{
    background-color: #ea6f5a;
}
</style>


<div id="container">
    <div id="result">
        <span id="clear" onclick="result(this.innerText)">C</span>
        <span id="screen"></span>
    </div>
    <div id="count">
        <span onclick="result(this.innerText)">7</span>
        <span onclick="result(this.innerText)">8</span>
        <span onclick="result(this.innerText)">9</span>
        <span onclick="result(this.innerText)">+</span>
        <span onclick="result(this.innerText)">4</span>
        <span onclick="result(this.innerText)">5</span>
        <span onclick="result(this.innerText)">6</span>
        <span onclick="result(this.innerText)">-</span>
        <span onclick="result(this.innerText)">1</span>
        <span onclick="result(this.innerText)">2</span>
        <span onclick="result(this.innerText)">3</span>
        <span onclick="result(this.innerText)">/</span>
        <span onclick="result(this.innerText)">0</span>
        <span onclick="result(this.innerText)" >.</span>
        <span onclick="result(this.innerText)" id="sum" >=</span>
        <span onclick="result(this.innerText)" >*</span>
    </div>
</div>

看下基础效果出来以后的效果图吧：

每个键的基本色为白色，鼠标滑过会变成紫色，归零键为红色，等于号为绿色

那看下实现计算功能的代码：
（由于所学不深，则用了eval函数，来实现功能）

function result(val){    //val为每次点击得到的值
    var value = document.getElementById("screen"); //回去计算框
    switch(val){
        //自动计算结果
        case "=":
            value.innerText = eval(value.innerText);
            break;
        //清除计算结果
        case "C":
            value.innerText = "";
            break;
        //将点击的值变成连接字符串
        default:
            value.innerText =value.innerText + val;
            break;
    }
}

这样几行代码就实现了最简单的计算器了，那看下效果吧：

计算加减
得到结果
计算乘除
得到结果

---

怎么说呢，这就是最简单的效果了吧，昨天写了很多代码，都只实现了加减，也很丧，虽然后来实现了功能，但是并不是自己的想法，只是找到了通用的方法，也算是一种收获吧。加油！