JS基础实现-简单计算机（可实现连续运算）

最新推荐文章于 2023-04-03 13:58:37 发布
专科编程小白
最新推荐文章于 2023-04-03 13:58:37 发布
阅读量218
点赞数 1
文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/weixin_54118834/article/details/126137833
版权
<!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>Document</title>
    <style>
        #all{
            background-color: rgb(233, 198, 145);
            width: 50%;
            height: 700px;
            float: left;
        }
        #toper{ 
            font-size: x-large;
            background-color: rgb(249, 235, 216);
            width: 100%;
            height: 20%;
        }
        #button{
            background-color: aliceblue;
            width: 65%;
            height: 80%;
            float: left;
        }
        #symbol{
            text-align: center;
            font-size:xx-large;
            background-color: rgb(218, 232, 244);
            float: left;
            width: 35%;
            height: 80%;
        }
        #num1{
            float: left;
            width: 75%;
            height: 100%;
        }
        #del{
            float: left;
            width: 25%;
            height: 100%;
        }
        #sym-show{
            float: left;
            width: 15%;
            height: 100%;
        }
        #num2{
            height: 100%;
            float: left;
            width: 85%;
        }
        .top-apt{
            height: 50%;
        }
        .topup-apt{
            height: 50%;
        }
        .input-line{
            height: 24.1%;
        }
        .row{
            text-align: center;
            font-size:xx-large;
            float: left;
            width: 33.31%;
            height: 100%;
        }
        .row-change{
            background-color:rgb(226, 234, 241);
            text-align: center;
            font-size:xx-large;
            float: left;
            width: 33.31%;
            height: 100%;
        }
        .mid-sym{
            height: 50%;
        }
        .sym{
            height: 25%;
        }
        .opra{
            float: left;
            width: 50%;
            height: 50%;
        }
        .sym-change{
            height: 25%;
            background-color:rgb(226, 234, 241);
        }
        .opra-change{
            background-color:rgb(226, 234, 241);
            float: left;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div id="all">
        <div id="toper">
            <div id="top-up" class="top-apt">
                <div id="tu-up" class="topup-apt">
                    <div id="num1"></div>
                    <div id="del">C</div>
                </div>
                <div id="tu-down" class="topup-apt">
                    <div id="sym-show"></div>
                    <div id="num2"></div>
                </div>
            </div>
            <div id="top-down" class="top-apt"></div>
        </div>
        <div id="button">
            <div class="input-line">
                <div class="row">7</div>
                <div class="row">8</div>
                <div class="row">9</div>
            </div>
            <div class="input-line">
                <div class="row">4</div>
                <div class="row">5</div>
                <div class="row">6</div>
            </div>
            <div class="input-line">
                <div class="row">1</div>
                <div class="row">2</div>
                <div class="row">3</div>
            </div>
            <div class="input-line">
                <div class="row">%</div>
                <div class="row">0</div>
                <div class="row">.</div>
            </div>
        </div>
        <div id="symbol">
            <div class="sym">←<br></div>
            <div class="mid-sym">
                <div class="opra">+</div>
                <div class="opra">-</div>
                <div class="opra">*</div>
                <div class="opra">÷</div>
            </div>
            <div class="sym">=</div>
        </div>
    </div>
    <script>
        //数字域响应
        var flag = true;
        var button = document.querySelector('#button');
        var line = button.children;
        var num1 = document.querySelector('#num1');
        var symshow = document.querySelector('#sym-show');
        var num2 = document.querySelector('#num2');
        var result = document.querySelector('#top-down');
        var empty = document.querySelector('#del');
        for (let i = 0; i < line.length; i++) {
            for (let j = 0; j < 3; j++) {
                line[i].children[j].addEventListener('mouseover',rowfunc);
                line[i].children[j].addEventListener('mouseout',rowback);
                line[i].children[j].addEventListener('click',shownum)
            }
        }

        //按钮变色效果
        function rowfunc(){
            this.className = 'row-change';
        }
        function rowback(){
            this.className = 'row';
        }
        function symfunc(){
            this.className = 'sym-change';
        }
        function symback(){
            this.className = 'sym';
        }
        function oprafunc(){
            this.className = 'opra-change';
        }
        function opraback(){
            this.className = 'opra';
        }

        function shownum(){
            if(symshow.innerHTML == ''&& num2.innerHTML == ''){
                num1.innerHTML += this.innerHTML;
            }else if(result.innerHTML != ''){
                del();
                num1.innerHTML += this.innerHTML;
            }else{
                num2.innerHTML += this.innerHTML;
            }
        }

        function symshowfunc(e){
            if (result.innerHTML != '') {
                var num = result.innerHTML;
                del();
                num1.innerHTML = num;
                symshow.innerHTML = e.target.innerHTML;
            }else if (num2.innerHTML != '') {
                get();
                var num = result.innerHTML;
                del();
                num1.innerHTML = num;
                symshow.innerHTML = e.target.innerHTML;
            }else{
                symshow.innerHTML = e.target.innerHTML;
            }
        }

        function get(){
            var symbol = symshow.innerHTML;
            switch(symbol){
                case('+'):
                    result.innerHTML = Number(num1.innerHTML)+Number(num2.innerHTML);
                    break;
                case('-'):
                    result.innerHTML = Number(num1.innerHTML)-Number(num2.innerHTML);
                    break;
                case('*'):
                    result.innerHTML = Number(num1.innerHTML)*Number(num2.innerHTML);
                    break;
                case('÷'):
                    result.innerHTML = Number(num1.innerHTML)/Number(num2.innerHTML);
            }
        }

        function del(){
            num1.innerHTML = '';
            num2.innerHTML = '';
            symshow.innerHTML = '';
            result.innerHTML = '';
        }

        function backfunc(){
            window.history.back();

        }

        //符号域响应
        var sym = document.querySelectorAll('.sym');
        var opra = document.querySelector('.mid-sym')
        for (let i = 0; i < sym.length; i++) {
            sym[i].addEventListener('mouseover',symfunc);
            sym[i].addEventListener('mouseout',symback);
        }
        for (let i = 0; i < opra.children.length; i++) {
            console.log(opra.children[i]);
            opra.children[i].addEventListener('mouseover',oprafunc);
            opra.children[i].addEventListener('mouseout',opraback);
        }
        
        //运算符效果控制
        empty.addEventListener('click',del);
        opra.addEventListener('click',symshowfunc);
        sym[0].addEventListener('click',backfunc)
        sym[1].addEventListener('click',get)  
    </script>
</body>
</html>
可以搬走不客气