网页计算器

效果

image-20210923193111081

代码

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>计算器</title>

        <style type="text/css">
            #calc{
                border: solid 1px black;
                width: 300px;
                height: 300px;
                text-align: center;
                background-color: gainsboro;
            }

            input[type=text]{
                border: solid 1px black;
                width: 150px;
                height: 40px;
                margin: 10px;
            }

            input[type=button]{
                width: 40px;
                height: 40px;
                margin: 5px;
                font-size: 30px;
            }
        </style>

        <script type="text/javascript">
            function cal(btn){
                var num=btn.value;
                switch (num)
                {
                    case "=":
                        document.getElementById("input").value = eval(document.getElementById("input").value);
                        break;

                    case "C":
                        document.getElementById("input").value = "";
                        break;

                    default:
                        document.getElementById("input").value = document.getElementById("input").value + num;
                        break;
                }
            }
        </script>
    </head>

    <body>
        <div id="calc">
            <input type="text" id="input" value="" /><br />


            <input type="button" value="7" onclick="cal(this)"/>
            <input type="button" value="8" onclick="cal(this)"/>
            <input type="button" value="9" onclick="cal(this)"/>
            <input type="button" value="×" onclick="cal(this)"/>
            <br />

            <input type="button" value="4" onclick="cal(this)"/>
            <input type="button" value="5" onclick="cal(this)"/>
            <input type="button" value="6" onclick="cal(this)"/>
            <input type="button" value="-" onclick="cal(this)"/>
            <br />

            <input type="button" value="1" onclick="cal(this)"/>
            <input type="button" value="2" onclick="cal(this)"/>
            <input type="button" value="3" onclick="cal(this)"/>
            <input type="button" value="+" onclick="cal(this)"/>
            <br />

            <input type="button" value="c" onclick="cal(this)"/>
            <input type="button" value="0" onclick="cal(this)"/>
            <input type="button" value="/" onclick="cal(this)"/>
            <input type="button" value="=" onclick="cal(this)" />
        </div>
    </body>

</html>