js实现简单的计算器

最新推荐文章于 2023-11-09 11:24:55 发布

橙橙橙留香

最新推荐文章于 2023-11-09 11:24:55 发布

阅读量262

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/dS1_mple/article/details/133344811

版权

html 部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>这是一个计算器</title>
    <link href="nihao.css" rel="stylesheet">
</head>

<body>
    <table align="center" cellpadding="15" class="n6">
        <tr>
            <th colspan="4"><input type="text" class="n5" style="width: 400px; height: 80px;" value="0" id="inp"></th>
        </tr>
        <tr>
            <td><button class="n4" onclick="addStr(7)">7</button></td>
            <td><button class="n4" onclick="addStr(8)">8</button></td>
            <td><button class="n4" onclick="addStr(9)">9</button></td>
            <td><button class="n3" onclick="addStr('/')">/</button></td>
        </tr>
        <tr>
            <td><button class="n4" onclick="addStr(4)">4</button></td>
            <td><button class="n4" onclick="addStr(5)">5</button></td>
            <td><button class="n4" onclick="addStr(6)">6</button></td>
            <td><button class="n3" onclick="addStr('*')">*</button></td>
        </tr>
        <tr>
            <td><button class="n4" onclick="addStr(1)">1</button></td>
            <td><button class="n4" onclick="addStr(2)">2</button></td>
            <td><button class="n4" onclick="addStr(3)">3</button></td>
            <td><button class="n3" onclick="addStr('+')">+</button></td>
        </tr>
        <tr>
            <td><button class="n4" onclick="addStr(0)">0</button></td>
            <td><button class="n1" onclick="cls()">ac</button></td>
            <td><button class="n2" onclick="calc()">=</button></td>
            <td><button class="n3" onclick="addStr('-')">-</button></td>
        </tr>
    </table>
    <script>
        function addStr(s){
            var inp = document.getElementById("inp");
            inp.value=inp.value+s;
        }
        function calc(){
            var inp = document.getElementById("inp");
            val=eval(inp.value)
            inp.value=val;
        }
        function cls(){
            var inp = document.getElementById("inp");
            inp.value="0";
        }
    </script>
</body>

</html>

css部分

.n1{
    background-color: yellow;
    height: 50px;
    width: 80px;
    font-size: 32px;
    border-radius: 100px;
}
.n2{
    background-color: blue;
    height: 50px;
    width: 80px;
    font-size: 32px;
    border-radius: 100px;
}
.n3{
    background-color: rgb(128, 128, 137);
    height: 50px;
    width: 80px;
    font-size: 32px;
    border-radius: 100px;
}
.n4{
    background-color: rgb(241, 241, 252);
    height: 50px;
    width: 80px;
    font-size: 32px;
    border-radius: 100px;
}
.n5{
    text-align: right;
    font-size: 50px;
}
.n6{
    border-collapse: collapse;
    background-color: rgb(166, 177, 187);
    border-radius: 20px
}
table td,
table th{
    height: 200px;
    width: 100px;
    font-size: 50px;
    text-align: center;
    height: 100%;
}

结果图