zoukankan      html  css  js  c++  java
  • 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>

    小图标:

     

  • 相关阅读:
    渣渣小本求职复习之路每天一博客系列——Java基础(9)
    渣渣小本求职复习之路每天一博客系列——Java基础(8)
    渣渣小本求职复习之路每天一博客系列——Java基础(7)
    渣渣小本求职复习之路每天一博客系列——Java基础(6)
    渣渣小本求职复习之路每天一博客系列——Java基础(5)
    渣渣小本求职复习之路每天一博客系列——Java基础(4)
    渣渣小本求职复习之路每天一博客系列——Java基础(3)
    渣渣小本求职复习之路每天一博客系列——数据结构与常用算法(3)
    redis常用命令
    redis的sets类型
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10281374.html
Copyright © 2011-2022 走看看