HTML5+CSS3+JavaScript+JQuery写个计算器

qq_47665717

已于 2023-03-30 16:28:22 修改

阅读量133

点赞数

文章标签： css3 javascript html5 jquery

于 2023-03-30 14:52:37 首次发布

本文链接：https://blog.csdn.net/qq_47665717/article/details/129857696

版权

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
        html{
            height: 100%;
            background-image: linear-gradient(to bottom right,lightcoral,lightcyan);
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .calculator{
            width: 320px;
            height: 400px;
            background-color: rgb(240, 240, 240);
            padding: 15px;
            border-radius: 10px;
            position: relative;
            top: 200px;
            box-shadow: 2px 1px 4px 0px rgba(0,0,0,0.1);
            transition: all 0.5s;
        }
        .calculator:hover{
            outline: 1.5px solid lightskyblue;
        }
        .calculator-top{
            margin-top: 5px;
        }
        .input-box{
            width: 290px;
            height: 50px;
            text-align: right;
            outline-color: transparent;
            border: none;
            font-size: 25px;
            padding-right: 5px;
            border-radius: 5px;
            transition: all 0.1s;
        }
        .input-box:hover{
            outline: 2px solid lightskyblue;
        }
        .calculator-bottom{
            width: 290px;
            height: 300px;
            background-color: white;
            margin-top: 15px;
            border-radius: 5px;
            padding: 10px;
        }
        .btn{
            all: unset;
            float:left;
            width: 45px;
            height: 45px;
            text-align:center;
            background-color:rgb(255, 255, 255);
            box-shadow: 2px 1px 4px 0px rgba(0,0,0,0.1);
            margin-right: 8px;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 50%;
            cursor: pointer;
            outline-color: transparent;
            transition: all 0.15s;
        }
        .use{
            color: rgb(0, 153, 255);
            font-weight: 520;
        }
        .number{
            font-weight: 550;
        }
        .btn:hover{
            outline: 1.5px solid lightskyblue;
        }
        .btn:active{
            transform: scale(0.9);
            font-size: 90%;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="calculator-top">
          <input type="text" class="input-box" id="inputbox">
        </div>

        <div class="calculator-bottom">
            <button class="btn">MC</button>
            <button class="btn">M+</button>
            <button class="btn">M-</button>
            <button class="btn use" id="clear">C</button>
            <button class="btn use" id="back-">←</button>
            <button class="btn number">7</button>
            <button class="btn number">8</button>
            <button class="btn number">9</button>
            <button class="btn use Four_operations" id="+">+</button>
            <button class="btn use Four_operations" id="-">-</button>
            <button class="btn number">4</button>
            <button class="btn number">5</button>
            <button class="btn number">6</button>
            <button class="btn use Four_operations" id="*">×</button>
            <button class="btn use Four_operations" id="/">÷</button>
            <button class="btn number">1</button>
            <button class="btn number">2</button>
            <button class="btn number">3</button>
            <button class="btn use sqr">&nbsp;&nbsp;x<sup>2</sup></button>
            <button class="btn use root">√</button>
            <button class="btn negative">±</button>
            <button class="btn number">0</button>
            <button class="btn point">.</button>
            <button class="btn use percentage">%</button>
            <button class="btn use amount"><b>＝</b></button>
        </div>
    </div>

    <script src="jquery-3.6.4.js"></script>
    <script>
        $(function(){
            $('.Four_operations').on('click',function(){
            back_value.value+=$(this).attr('id');
            });

            $('.sqr').on('click',function(){
                back_value.value=$('.input-box').val()**2;
            });

                $('.number').on('click',function(){
                    back_value.value+=$(this).text();
                })

                $('.root').on('click',function(){
                    back_value.value=Math.sqrt(parseInt(eval(back_value.value)));
                })

            $('.amount').on('click',function(){
                var fx=back_value.value
                back_value.value=eval(back_value.value);
            })
            
            var negative_count=1;
            $('.negative').on('click',function(){
                if(negative_count%2===0){
                    back_value.value=Math.abs(parseInt(eval(back_value.value)))
                }else{
                    back_value.value='-'+$('.input-box').val();
                }
                negative_count++;
            })

            $('.percentage').on('click',function(){
                back_value.value+=$(this).text()
            })

            $('.point').on('click',function(){
                back_value.value+=$(this).text()
            })
        })
    </script>
    <script>
        var back_value=document.getElementById('inputbox');
        var back=document.getElementById('back-');
        back.addEventListener('mousedown',function(){
            back_value.value=back_value.value.substring(0,back_value.value.length-1);
        },false)

        var clear_=document.getElementById('clear');
        clear_.addEventListener('mousedown',function(){
            back_value.value='';
        },false)

    </script>
 
</body>
</html>