利用javascript制作计算器

前面我们讲到如何用js模拟计算器的基本运算，现在咱们来讲一下如何使用HTML+CSS+javascript制作一个功能齐全，切外观大气的计算器。功能效果如下图所示：

HTML代码：

    <table>
        <tr>
            <td colspan="5">
                <input type="text" id="text">
            </td>
        </tr>
        <tr>
            <td><button value="7" id="num7" onclick="func(this)">7</button></td>
            <td><button value="8" id="num8" onclick="func(this)">8</button></td>
            <td><button value="9" id="num9" onclick="func(this)">9</button></td>
            <td><button value="AC" id="ac">AC</button></td>
            <td><button value="C" id="c">C</button></td>
        </tr>
        <tr>
            <td><button value="4" id="num4" onclick="func(this)">4</button></td>
            <td><button value="5" id="num5" onclick="func(this)">5</button></td>
            <td><button value="6" id="num6" onclick="func(this)">6</button></td>
            <td><button id="sub" value="-" onclick="func(this)">-</button></td>
            <td><button id="ride" value="*" onclick="func(this)">×</button></td>
        </tr>
        <tr>
            <td><button value="1" id="num1" onclick="func(this)">1</button></td>
            <td><button value="2" id="num2" onclick="func(this)">2</button></td>
            <td><button value="3" id="num3" onclick="func(this)">3</button></td>
            <td rowspan="2"><button id="add" value="+" onclick="func(this)">+</button></td>
            <td><button id="devide" value="/" onclick="func(this)">÷</button></td>
        </tr>
        <tr>
            <td><button value="0" id="num0" onclick="func(this)">0</button></td>
            <td><button value="00" id="num00" onclick="func(this)">00</button></td>
            <td><button value="." id="point" onclick="func(this)">.</button></td>
            <td><button value="=" id="equal">=</button></td>
        </tr>
    </table>

注意：每个button中都要设置与标签文本内容相对应的value值，方便后面调用。

CSS代码：

    * {
        margin: 0;
        padding: 0;
    }
    table{
        margin: 20px auto;
        background: url("car.jpg") no-repeat center/100% 100%;
    }

    table,td {
        border: 1px solid skyblue;
    }

    td {
        width: 20%;
    }

    input[type=text] {
        width: 400px;
        height: 50px;
        font-size: 35px;
    }

    button {
        width: 100%;
        height: 40px;
        font-size: 20px;
        font-weight: 900;
    }

    button#add {
        height: 84px;
    }
    button,input{
        opacity: 0.8;
    }

注意：css在设置时，将 input 和 button 的不透明度调成了0.8，为了看到后面的背景。

JavaScript代码：

// 1.获取元素
    var aBtns = document.getElementsByTagName("button");
    console.log(aBtns);
    var oText = document.getElementById("text");
    var oCle = document.getElementById("ac");
    var oEqual = document.getElementById("equal");
    var oDel=document.getElementById("c");
    // 2.定义全局变量 存储结果
    var res = "";

    // 3.编辑方法
    // aBtns[0].οnclick=function(){
    // res+=aBtns[0].value;
    // oText.value=res;
    // }
    // aBtns[1].οnclick=function(){
    // res+=aBtns[1].value;
    // oText.value=res;
    // }
    
    //封装方法 将可变化的量用参数表示 
    function func(x) {
        res += x.value;
        oText.value = res;
    }
    
    
    // aBtns[0].οnclick=function(){
    // func(aBtns[0])
    // }
    // aBtns[1].οnclick=function(){
    // func(aBtns[1])
    // }

    // 功能代码

    // 清空方法
    oCle.onclick = function () {
        oText.value = "";
        res="";
    }
    // 求值
    oEqual.onclick=function(){
        res= eval(res);
        oText.value=res;
    }
    // 删除
    oDel.onclick=function(){
        res=res.substring(0,res.length-1);
        oText.value=res;
    }

    // 字符串
    // 属性：length 获取字符串的长度
    // 方法：subString(字符起始位置,结束位置) 截取字符串 留头不留尾

    // var str="hello world";
    // console.log(str.length);
    // console.log(str.substring(0,str.length-1));

    // 4.获取值

    // var num=10;
    // num+=2;//num=num+2 x+=y x=x+y
    // console.log(num);

注意：js代码的编写过程中稍微有些难度就是如何实现点击 C 按钮时，输入框中删掉末尾一个字符。此部分功能实现用到了字符串的subString()方法及length属性。

关注我，学习前端知识不迷路。