史上最好看的利用javascript製作計算器

利用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屬性。

屬性或方法	描述
length	返回字符串的長度
substring()	提取字符串中兩個指定的索引號之間的字符

關注我，學習前端知識不迷路。