颜值超高的简单计算器(HTML+CSS+JS)_html计算器的外观-CSDN博客

本文链接：https://blog.csdn.net/giaogege666/article/details/130043831
先来看一下效果吧
<!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>
        body {
            /* 设置容器尺寸 - 原理1 */
            width: 100%;
            height: 100%;
            /* 背景渐变色 - 原理2 */
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            /* 背景尺寸 - 原理3 */
            background-size: 600% 600%;
            /* 循环动画 - 原理4 */
            animation: gradientBG 20s ease infinite;
        }

        /* 动画，控制背景 background-position */
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .calculator {
            box-shadow: 2px 2px 11px 10px lightblue;
            margin-top: 20px;
            height: 617px;
            background-color: #efefef;
            width: 500px;
            margin: 0 auto;
        }

        .title {
            font-family: 'Courier New', Courier, monospace;
            font-size: 40px;
            text-align: center;
            width: 100%;
            margin-bottom: 20px;
        }

        .screen {
            position: relative;
            height: 100px;
            margin: 0 20px 20px 20px;
            background-color: #efefef;
            border: 2px solid #757373;
            box-shadow: -1px 3px 22px -5px #333;

        }

        .pw {
            display: flex;
        }

        .leftpw {
            display: flex;
            flex-wrap: wrap;
            height: 500px;
            width: 400px;
        }

        .rightpw {
            background-color: #efefef;
            height: 457px;
            width: 130px;
            margin-right: 20px;
        }

        .itemnum {
            height: 80px;
            width: 90px;
            background-color: #ee7752;
            margin-left: 20px;
            text-align: center;
            line-height: 80px;
            font-size: 38px;
            font-weight: 800;
            box-shadow: -1px 5px 13px -5px #333;

        }

        .pushdown {
            box-shadow: 6px 8px 13px 1px #333;
            transform: translate(-3px, -3px);
        }

        .symbol {
            width: 100%;
            height: 98px;
            /* 背景渐变色 - 原理2 */
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            /* 背景尺寸 - 原理3 */
            background-size: 600% 600%;
            /* 循环动画 - 原理4 */
            animation: gradientBG 20s ease infinite;
            margin-bottom: 20px;
            text-align: center;
            line-height: 98px;
            font-size: 65px;
            font-weight: 600;
            box-shadow: -1px 5px 13px -5px #333;
        }
        .input {
            float: left;
            position: absolute;
            left: 20px;
            top: 10px;
        }
        .output {
            float: right;
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="title">简易计算器</div>
    <!-- 计算器的外部布局 -->
    <div class="calculator">
        <!-- 计算器的显示区域 -->
        <!-- 占位符号 -->
        <div style="height: 20px;"></div>
        <!-- 荧幕区域 -->
        <div class="screen">
            <!-- 输入区域 -->
            <div class="input"></div>
            <!-- 输出区域 -->
            <div class="output"></div>
        </div>
        <!-- 按键区域 -->
        <div class="pw">
            <!-- 左边按键区域 -->
            <div class="leftpw">
                <div class="itemnum">1</div>
                <div class="itemnum">2</div>
                <div class="itemnum">3</div>
                <div class="itemnum">4</div>
                <div class="itemnum">5</div>
                <div class="itemnum">6</div>
                <div class="itemnum">7</div>
                <div class="itemnum">8</div>
                <div class="itemnum">9</div>
                <div class="itemnum">0</div>
                <div class="itemnum" onclick="getpoint()">.</div>
                <div class="itemnum" onclick="getequals()">=</div>
            </div>
            <!-- 右边案件区域 -->
            <div class="rightpw">
                <div class="symbol">+</div>
                <div class="symbol">-</div>
                <div class="symbol">×</div>
                <div class="symbol">÷</div>
            </div>
        </div>
    </div>



</body>
<script>
    // 定义存放元素的数组,然后把元素push进去，然后用数组的join()方法来转化为字符串的操作
    var expression = []
    // 循环绑定给每个字母绑定事件，然后定时器过一段时间后去掉时间
    // 获取
    const items = document.querySelectorAll('.itemnum')
    //    items.forEach(element => {
    //         element.addEventListener('click',function () {
    //             console.log("点击到了");
    //         })
    //    });
    for (let i = 0; i < items.length; i++) {


        items[i].addEventListener('click', function () {
            // if (i + 1 == 11) {
            //     expression.push('.')
            // }
            // if (i + 1 == 12) {
            //     expression.push('=')
            // }

            //在按下按键的时候应该有一个按压的效果，按下的时候先给模糊背景，然后将元素下移动，然后定时器让一秒一后往上移，同时清楚阴影效果
            items[i].classList.add('pushdown')
            setTimeout(() => {
                items[i].classList.remove('pushdown')
            }, 700);
            if (i < 10) {
                if (i + 1 !== 10) {
                    expression.push(i + 1)
                } else {
                    expression.push(0)
                }
                console.log(expression.join(''));
                document.querySelector('.input').innerHTML = expression.join('')
            }

        })

    }
    // 获取加减乘除信号
    const symbols = document.querySelectorAll('.symbol')
    // 循环遍历添加事件
    for (let i = 0; i < symbols.length; i++) {
        symbols[i].addEventListener('click', function () {
            symbols[i].classList.add('pushdown')
            setTimeout(() => {
                symbols[i].classList.remove('pushdown')
            }, 700);
            if (symbols[i].innerHTML == '+') {
                console.log("调用了")
                expression.push('+')
                document.querySelector('.input').innerHTML = expression.join('')
            }
            if (symbols[i].innerHTML == '-') {
                console.log("调用了")
                expression.push('-')
                document.querySelector('.input').innerHTML = expression.join('')
            }
            if (symbols[i].innerHTML == '×') {
                console.log("调用了")
                expression.push('*')
                document.querySelector('.input').innerHTML = expression.join('')
            }
            if (symbols[i].innerHTML == '÷') {
                console.log("调用了")
                expression.push('/')
                document.querySelector('.input').innerHTML = expression.join('')
            }
            console.log(expression);
        })
    }
    function calculator() {

        var answer = expression.join('')
        console.log(eval(answer));
        document.querySelector('.output').innerHTML = eval(answer)
    }

    function getpoint() {
        expression.push('.')
    }
    function getequals() {
        calculator()
        expression = []
    }

</script>

</html>