史上最好看的利用javascript制作计算器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    * {
        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;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 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);