js实现仿华为手机计算器，兼容电脑和手机屏幕

效果图：
电脑端：
手机端：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿华为计算器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            overflow: hidden;
        }
        .calculator{
            width: 300px;
            margin: 10px auto;
            border: 1px solid #E4E4E4;
        }
        .calc-screen p{
            background-color: #fff;
            height: 60px;
            line-height: 60px;
            text-align: right;
            padding: 0px 10px;
            overflow-x: hidden;
        }
        .calc-in{
            font-size: 20px;
            font-weight: bold;
        }
        .calc-out{
            color: darkgray;
        }
        table{
            border-collapse: collapse;
        }
        .calc-btn td{
            width: 75px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #ffffff;
            border: 1px solid #E4E4E4;
            margin-left: -1px;
            margin-right: -1px;
            font-size: 20px;
            cursor: pointer;
        }
        .calc-btn td:hover{
            background-color: #EAEAEA;
        }
        .del{
            background: url("del.jpg") no-repeat 25px;
        }
        .calc-btn .bc{
            background-color: #F5F5F5;
        }
        .calc-btn td.eq:hover{
            background-color: #019DB1
        }
        .fcg{
            color: #00ACC2;
        }
    </style>
</head>
<body>
<div class="calculator" id="calculator">
    <form action="" name="calculator" method="get">
        <div class="calc-screen">
            <!-- 输入的数据 -->
            <p class="calc-in" id="calc-in"></p>
            <!-- 输出的运算结果 -->
            <p class="calc-out" id="calc-out"></p>
        </div>
        <div class="calc-btn" id="calc-btn">
            <table>
                <tr>
                    <td class="bc">mc</td>
                    <td class="bc">m+</td>
                    <td class="bc">m-</td>
                    <td class="bc">mr</td>
                </tr>
                <tr>
                    <td class="fcg bc" onclick="clearScreen()">c</td>
                    <td class="fcg bc" onclick="command('÷')">÷</td>
                    <td class="fcg bc" onclick="command('×')">×</td>
                    <td class="del bc" onclick="del()"></td>
                </tr>
                <tr>
                    <td onclick="command(7)">7</td>
                    <td onclick="command(8)">8</td>
                    <td onclick="command(9)">9</td>
                    <td class="fcg bc" onclick="command('-')">-</td>
                </tr>
                <tr>
                    <td onclick="command(4)">4</td>
                    <td onclick="command(5)">5</td>
                    <td onclick="command(6)">6</td>
                    <td class="fcg bc" onclick="command('+')">+</td>
                </tr>
                <tr>
                    <td onclick="command(1)">1</td>
                    <td onclick="command(2)">2</td>
                    <td onclick="command(3)">3</td>
                    <td rowspan="2" style="color: #fff;background-color: #00ACC2" class="eq" onclick="calc()">=</td>
                </tr>
                <tr>
                    <td onclick="command('%')">%</td>
                    <td onclick="command(0)">0</td>
                    <td onclick="command('.')">.</td>
                </tr>
            </table>
        </div>
    </form>
</div>

<script>
    //兼容屏幕
    screenW = window.screen.width;//屏幕分辨率
    screenH = window.screen.height;//屏幕分辨率
    var calculator = document.getElementById("calculator");
    var calc_btn = document.getElementById("calc-btn").getElementsByTagName("td");
    console.log(document.body.clientWidth)
    if(document.body.clientWidth<600){
        calculator.style.width = screenW+"px";
        calculator.style.height = screenH+"px";
        calculator.style.border = "none";
        calculator.style.margin = "0";
        for(var i = 0;i<calc_btn.length;i++){
            calc_btn[i].style.width = screenW/4+"px";
            calc_btn[i].style.height = (screenH-120)/6 + "px";
        }
    }

    var calcIn = document.getElementById("calc-in");
    var calcOut = document.getElementById("calc-out");

    //输入数据函数
    function command(str) {
        calcIn.innerHTML = "" ? calcIn.innerHTML = str : calcIn.innerHTML =calcIn.innerHTML+str;
    }
    //计算数据函数
    function calc() {
        calcOut.innerHTML = eval(calcIn.innerHTML.replace(/×/g,"*").replace(/÷/g,"/").replace(/%/,"/100"));
        if(calcOut.innerHTML == "undefined"){
            calcOut.innerHTML = "";
        }
    }
    //清屏函数
    function clearScreen() {
        calcIn.innerHTML = "";
        calcOut.innerHTML = "";
    }
    //每次删除一位数据的函数
    function del() {
        calcIn.innerHTML = calcIn.innerHTML.substr(0,calcIn.innerHTML.length-1);
    }

</script>
</body>
</html>
小图标：
posted on 2019-01-17 11:37 xxcxxc 阅读(450) 评论(0) 编辑收藏举报