JavaScript 网页简易计算器

最新推荐文章于 2023-10-18 23:32:22 发布

WhiteMask362

最新推荐文章于 2023-10-18 23:32:22 发布

阅读量836

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_62630571/article/details/128898912

版权

【简易计算器】运用HTML、CSS、JavaScript，设计一个简易计算器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <style>
        #shang{
            text-align:center;
            font-family: 隶书;
        }
        #zhong button{
            height: 47px;
            width: 50px;
        }
        button{
            width: 55px;
            height: 55px;
        }
        #result , #zhong button{
            border: 1px solid black;
            float: left;
            margin: 2px;
        }
        #zhong{
            height: 50px;
            /* border: 1px solid blue; */
            width: 200px;
            margin: auto;
        }
        #result{
            width: 140px;
            height: 45px;
        } 
        
    </style>
</head>
<body>
    <div id="shang">
        <h1>简易计算器</h1>
        <hr>
    </div>
    <div id="zhong">
        <span id="result"></span>
        <button onclick="clearExp();">CE</button>
        <br><br>
    </div>
    <div align="center">

        <br>
        <button onclick="add(this)">7</button><button onclick="add(this)">8</button><button onclick="add(this)">9</button><button onclick="add(this)">/</button><br>
        <button onclick="add(this)">4</button><button onclick="add(this)">5</button><button onclick="add(this)">6</button><button onclick="add(this)">*</button><br>
        <button onclick="add(this)">1</button><button onclick="add(this)">2</button><button onclick="add(this)">3</button><button onclick="add(this)">-</button><br>
        <button onclick="calc()">=</button><button onclick="add(this)">0</button><button onclick="add(this)">.</button><button onclick="add(this)">+</button><br>
    </div>
</body>
<script>
    var exp ="";
    function add(obj){
        exp += obj.innerText;
        result.innerText = exp;
}
    function calc(){
        result.innerText = eval(exp);
    }
    function clearExp(){
        exp = "";
        result.innerText = exp;
    }
</script>
</html>