计算器js

最新推荐文章于 2024-06-14 15:02:13 发布

weixin_45474783

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量72

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45474783/article/details/128956592

版权

<!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>
        .wrapper{
            width: 400px;
            border:1px solid gray;
            box-sizing: border-box;
        }
        #content{
            width: 400px;
            height: 150px;
            border: 1px solid gray;
            box-sizing: border-box;
            text-align: right;
            line-height: 150px;
            font-size: 30px;
        }
        .box{
            width: 400px;
        }
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            box-sizing: border-box;
            float: left;
            font-size: 25px;
            text-align: center;
            line-height: 100px;

        }
        .div1:hover{
            box-shadow: 2px 2px 2px gray;
        }
        .div1:active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="content"></div>
        <div class="box">
            <div class="div1" id="1" onclick="getNum(this)">1</div>
            <div class="div1" id="2" onclick="getNum(this)">2</div>
            <div class="div1" id="3" onclick="getNum(this)">3</div>
            <div class="div1" id="+" onclick="getOperator(this)">+</div>
        </div>
        <div class="box">
            <div class="div1" id="4" onclick="getNum(this)">4</div>
            <div class="div1" id="5" onclick="getNum(this)">5</div>
            <div class="div1" id="6" onclick="getNum(this)">6</div>
            <div class="div1" id="-" onclick="getOperator(this)">-</div>
        </div>
        <div class="box">
            <div class="div1" id="7" onclick="getNum(this)">7</div>
            <div class="div1" id="8" onclick="getNum(this)">8</div>
            <div class="div1" id="9" onclick="getNum(this)">9</div>
            <div class="div1" id="*" onclick="getOperator(this)">*</div>
        </div>
        <div class="box">
            <div class="div1" id="0" onclick="getNum(this)">0</div>
            <div class="div1" id="C" onclick="clearClick(this)">C</div>
            <div class="div1" id="=" onclick="opert(this)">=</div>
            <div class="div1" id="/" onclick="getOperator(this)">/</div>
        </div>
    </div>
    <script>
        var 数字1 = 0;
        var 按钮标识 = 0;
        var 运算符 = '+';
        var content = document.getElementById('content');
        function getNum(btn){
            if(按钮标识==0){
                content.innerText += btn.innerText;
            }else{
                content.innerText = btn.innerText;
            }
            按钮标识 = 0;
        }
        function getOperator(btn){
            数字1 = content.innerText;
            运算符 = btn.innerText;
            按钮标识  = 1;
        }
        function opert(btn){
            var result = 0;
            switch(运算符){
                case '+':
                    result = parseInt(数字1)+parseInt(content.innerText);
                    break;
                case '-':
                    result = parseInt(数字1)-parseInt(content.innerText);
                    break;
                case '*':
                    result = parseInt(数字1)*parseInt(content.innerText);
                    break;
                case '/':
                    result = parseInt(数字1)/parseInt(content.innerText);
                    break;
            }
            content.innerText = result;
        }
        function clearClick(btn){
            content.innerText = '';
            数字1 = 0;
            按钮标识 = 0;
            运算符 = "+";
        }
    </script>
</body>
</html>