效果图：

电脑端：

手机端：

源码：

<!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>

小图标：

js实现仿华为手机计算器，兼容电脑和手机屏幕的更多相关文章

  1. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

  2. JS判断web网站访问端是PC电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! <script type="text/javascript"> <!-- //平台.设备和操 ...

  3. [转]仿91助手的PC与android手机通讯

    仿91助手的PC与android手机通讯 原文 知道91助手和豌豆莢吧? 说到这两个东西,最让人好奇的应该是就是和手机的交互了.我之前有研究过电脑和安卓的交互,基本功能已经走通了,在这里我想分享一下. ...

  4. JS判断手机访问页面，根据手机访问或者PC访问跳转

    当用户访问你网站时,如果是PC端访问,则不作处理,如果是手机或者平板访问,就跳转到自己定义的手机页面去,这个在做webapp的时候经常用到,把代码分享给大家,希望对大家有所帮助. 首先,你要在页面中引 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：手机、平板电脑、台式电脑

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...

  6. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  7. PHP判断访问终端，电脑或手机访问

    函数代码: //判断电脑或手机访问 function is_mobile(){ $user_agent = $_SERVER['HTTP_USER_AGENT']; $mobile_agents = ...

  8. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  9. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

随机推荐

  1. HDU1518 Square（DFS） 2016-07-24 15:08 49人阅读 评论(0) 收藏

    Square Problem Description Given a set of sticks of various lengths, is it possible to join them end ...

  2. This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed(在64位模式下运行安装了32位的Oracle客户端组件时，会发生此问题)

    部署win服务时出现下面的问题: 在事件查看器中看到如下错误: 日志名称: Application来源: ***调度服务日期: 2014/5/21 12:53:21事件 ID: 0任务类别: 无级别: ...

  3. [FRAMESET][PHP]Frameset下面使用php-header('location:...') redirect链接

    一般,我们的管理后台都是使用frameset来进行布局的,所以如果我们对后台的登录会话时间进行了设定,那么在超过该时间session失效之后,那么我们就必须要在php文件中进行判断处理. 判断会话失效 ...

  4. 理解load averages

      今天在客户的生产环境中遇到了网络丢包的问题,但是查看我方部署smokeping监控发现对同一条线路监控,我方监控显示正常,判断丢包是由客户服务器负载过高导致,原因及排查思路如下: 使用uptime ...

  5. 通过Spring Session实现新一代的Session管理

    长期以来,session管理就是企业级Java中的一部分,以致于我们潜意识就认为它是已经解决的问题,在最近的记忆中,我们没有看到这个领域有很大的革新. 但是,现代的趋势是微服务以及可水平扩展的原生云应 ...

  6. IDEA13 项目配置

    之前用了一段时间的idea,有些老的代码,用eclipse跑了一下,比较麻烦,于是试用一下idea,最后,项目可以顺利跑起来. 对项目的配置,主要是在F4中,即:Module Setting,在模块的 ...

  7. Reddit CEO亲自诠释内容审核的无奈

    本文由  网易云发布. 导语:继数据泄露危机之后,Facebook将会雇用数千名新员工来负责新的验证系统,这个系统将首先在美国广告客户中生效,并将在未来几个月内涵盖其他国家.与此同时,如何让自己的社区 ...

  8. 20164317《网络对抗技术》Exp2 后门原理与实践

    1.实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF meterpreter(或其他软件)生成可执行文 ...

  9. H - The LCIS on the Tree HDU - 4718

    The LCIS on the Tree Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Oth ...

  10. Process Class (System.Diagnostics)

    import sys def hanoi(n, a, b, c): if n == 1: print('%c --> %c' % (a, c)) else: hanoi(n-1, a, c, b ...