SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>手机计算器</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
        body{background:#1c1c1c;padding:16px;}
        .calc{max-width:420px;margin:0 auto;}
        .screen{color:#fff;font-size:48px;text-align:right;padding:24px 12px;min-height:120px;word-break:break-all;}
        .row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;}
        button{height:72px;border:none;border-radius:99px;font-size:24px;cursor:pointer;}
        .num{background:#333;color:#fff;}
        .op{background:#ff9f0a;color:#fff;}
        .func{background:#a5a5a5;color:#000;}
    </style>
</head>
<body>
<div class="calc">
    <div class="screen" id="screen">0</div>
    <div class="row">
        <button class="func" onclick="clearAll()">AC</button>
        <button class="func" onclick="backspace()">⌫</button>
        <button class="func" onclick="append('%')">%</button>
        <button class="op" onclick="append('/')">÷</button>
    </div>
    <div class="row">
        <button class="num" onclick="append('7')">7</button>
        <button class="num" onclick="append('8')">8</button>
        <button class="num" onclick="append('9')">9</button>
        <button class="op" onclick="append('*')">×</button>
    </div>
    <div class="row">
        <button class="num" onclick="append('4')">4</button>
        <button class="num" onclick="append('5')">5</button>
        <button class="num" onclick="append('6')">6</button>
        <button class="op" onclick="append('-')">−</button>
    </div>
    <div class="row">
        <button class="num" onclick="append('1')">1</button>
        <button class="num" onclick="append('2')">2</button>
        <button class="num" onclick="append('3')">3</button>
        <button class="op" onclick="append('+')">+</button>
    </div>
    <div class="row">
        <button class="num" style="grid-column:span 2" onclick="append('0')">0</button>
        <button class="num" onclick="append('.')">.</button>
        <button class="op" onclick="calcEqual()">=</button>
    </div>
</div>

<script>
let inputStr = "";
const screen = document.getElementById('screen');

function append(val){
    // 替换 × ÷ 为js识别符号
    if(val === '×') val = '*';
    if(val === '÷') val = '/';
    inputStr += val;
    updateScreen();
}

function updateScreen(){
    let showText = inputStr.replaceAll('*','×').replaceAll('/','÷');
    screen.innerText = showText || "0";
}

function clearAll(){
    inputStr = "";
    updateScreen();
}

function backspace(){
    inputStr = inputStr.slice(0,-1);
    updateScreen();
}

function calcEqual(){
    try{
        let res = eval(inputStr);
        // 小数太长简化
        if(!isFinite(res)) throw "err";
        inputStr = String(res);
        updateScreen();
    }catch(e){
        screen.innerText = "错误";
        inputStr = "";
    }
}
</script>
</body>
</html>