css,css,javascript实现一个简单的计算器

最新推荐文章于 2023-01-20 12:00:00 发布

cysisu

最新推荐文章于 2023-01-20 12:00:00 发布

阅读量330

点赞数 2

分类专栏： html css js

本文链接：https://blog.csdn.net/cysisu/article/details/83585737

版权

js 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

实现效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>calculator</title>
    <style>
        .display {
            width: 311px;
            height: 40px;
            font: 400 20px/40px "微软雅黑";
        }

        input {
            height: 50px;
            width: 60px;
            margin: 10px 10px;
            font: 400 20px/40px "微软雅黑";
            padding: inherit;
            margin: 0px;
        }

        .txt {
            width: 100px;
        }

        td {
            border: hidden;
        }

        table {
            background-color: #eee;
        }
    </style>
    <script>
        var str = "";
        function myfun(v) {

            if (v == "C") {
                txtResult.value = "";
                str = "";
            }
            else if (v == "=") {
                txtResult.value = eval(str);
                str = txtResult.value;
            }
            else if (v == "pow") {
                txtResult.value = txtResult.value + "pow(";
                str = str+"Math.pow(";
            }
            else {
                txtResult.value = txtResult.value + v;
                str = str + v;
            }
        }
    </script>
</head>

<body>
    <table border="1" align="center" )>
        <tr>
            <td colspan="5"> <input class="display" value="" type="text" id="txtResult" size="27"></td>
        </tr>

        <tr>
            <td><input type="button" value="1" onclick="myfun(this.value)"></td>
            <td><input type="button" value="2" onclick="myfun(this.value);"></td>
            <td><input type="button" value="3" onclick="myfun(this.value);"></td>
            <td><input type="button" value="+" onclick="myfun(this.value);"></td>
            <td><input type="button" value="-" onclick="myfun(this.value);"></td>
        </tr>

        <tr>
            <td><input type="button" value="4" onclick="myfun(this.value);"></td>
            <td><input type="button" value="5" onclick="myfun(this.value);"></td>
            <td><input type="button" value="6" onclick="myfun(this.value);"></td>
            <td><input type="button" value="*" onclick="myfun(this.value);"></td>
            <td><input type="button" value="/" onclick="myfun(this.value);"></td>
        </tr>


        <tr>
            <td><input type="button" value="7" onclick="myfun(this.value);"></td>
            <td><input type="button" value="8" onclick="myfun(this.value);"></td>
            <td><input type="button" value="9" onclick="myfun(this.value);"></td>
            <td><input type="button" value="(" onclick="myfun(this.value);"></td>
            <td><input type="button" value=")" onclick="myfun(this.value);"></td>

        </tr>

        <tr>
            <td><input type="button" value="0" onclick="myfun(this.value);"></td>
            <td><input type="button" value="C" onclick="myfun(this.value);"></td>
            <td><input type="button" value="," onclick="myfun(this.value);"></td>
            <td><input type="button" value="pow" onclick="myfun(this.value);"></td>
            <td><input type="button" value="=" onclick="myfun(this.value);"></td>
        </tr>
    </table>

</body>
</html>