lovecoding
/
J250419


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        /*网页的格式化*/
        *{
            margin: 0;
            padding: 0;
            font-family: "Segoe UI";
            box-sizing: border-box;
        }
        body{
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .calculator{
            background-color: #000;
            border-radius: 15px;
            width: 100%;
            max-width: 400px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }
        .display{
            background-color: #222222;
            color: #fff;
            padding: 25px 20px;
            text-align: right;
            font-size: 30px;
            font-weight: 300;
            overflow-x: auto;
        }
        .buttons{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 1px;
        }
        button{
            background-color: #666666;
            color: #fff;
            border: none;
            padding: 20px;
            font-size: 30px;
            transition: background-color 0.2s ease;
        }
        button:hover{
            background-color: #888;
        }
        button:active{
            background-color: #aaa;
        }
        .operator{
            background-color: #ff9500;
        }
        .operator:hover{
            background-color: #ffaa33;
        }
        .operator:active{
            background-color: #ffbb33;
        }
        .clear{
            background-color: #ff3b30;
        }
        .clear:hover{
            background-color: #ff4f40;
        }
        .clear:active{
            background-color: #ff8f80;
        }
        .zero{
            grid-column: span 2;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="clear" id="clear">C</button>
            <button class="operator" data-value="±">±</button>
            <button class="operator" data-value="%">%</button>
            <button class="operator" data-value="÷">÷</button>

            <button data-value="7">7</button>
            <button data-value="8">8</button>
            <button data-value="9">9</button>
            <button class="operator" data-value="×">×</button>

            <button data-value="4">4</button>
            <button data-value="5">5</button>
            <button data-value="6">6</button>
            <button class="operator" data-value="-">-</button>

            <button data-value="1">1</button>
            <button data-value="2">2</button>
            <button data-value="3">3</button>
            <button class="operator" data-value="+">+</button>

            <button class="zero" data-value="0">0</button>
            <button data-value=".">.</button>
            <button class="operator" data-value="=">=</button>
        </div>
    </div>
    <script>
        //获取DOM元素
        const display = document.getElementById("display");
        const clear = document.getElementById("clear");
        //获取所有的指定元素 获取带有data-value属性的所有元素
        const buttons=document.querySelectorAll("button[data-value]");
        //计算器的状态
        let currentValue="0";
        let operator=null;
        let resetOnNextInput=false;

        //更新显示框操作
        function updateDisplay(){
            display.textContent=currentValue;
        }

        //处理数字的输入
        function handleNumberInput(number){
            if (resetOnNextInput){
                currentValue=number;
                resetOnNextInput=false
            }else {
                // 0 == '0' true  0 === '0' false
                currentValue=currentValue === '0' ?number:currentValue+number;
            }
            //更新
            updateDisplay();
        }

        //绑定事件监听器
        buttons.forEach(
            button =>{
                button.addEventListener('click',()=>{
                    const value=button.getAttribute("data-value");
                    if (!isNaN(value)||value==='0'){
                        handleNumberInput(value);
                    }else if(value === '.'){
                        //执行小数
                    }else if(value === '='){
                        //获取结果
                    }else {
                        //继续运算
                    }
                });
        });


    </script>

</body>
</html>