效果图：

电脑端：

手机端：

源码：

<!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. 使用delphi 开发多层应用（十九) ios通过soap 访问kbmmw服务器

    随着delphi XE4 的推出,开始真正意义上支持ios 的开发,由于目前kbmmw 还不完全支持ios 的开发,因此 无法直接使用kbmmw 的客户端访问kbmmw 的服务器(虽然kbmmw 也提 ...

  2. 2018.07.20 bzoj2152: 聪聪可可（点分治）

    传送门 本蒟蒻AC的第二道点分治,调了30min" role="presentation" style="position: relative;"&g ...

  3. Django介绍（2）

    https://www.cnblogs.com/yuanchenqi/articles/5658455.html

  4. UVa 12118 nspector's Dilemma （构造+DFS+欧拉回路）

    题意:给定n个点,e条边和每条边的长度t,每两个点之间都有路相连,让你求一条最短的路经过这e条边. 析:刚开始想到要判连通,然后把相应的几块加起来,但是,第二个样例就不过,后来一想,那么有欧拉回路的还 ...

  5. DDR的型号问题

    一.DDR的容量大小 先看下micron公司对DDR3命名的规则: 1.meg的含义: 内存中Meg的含义:Meg就是兆的含义,即1000,000. MT47H64M16 – 8 Meg x 16 x ...

  6. 百度地图（icon，zIndex）

    百度地图v2.0参考http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b2 覆盖物(Marker) Icon: va ...

  7. day01（静态、代码块、类变量和实类变量辨析 ）

    静态: 关键字:static          概述: 使用static关键字修饰的成员方法.成员变量称为静态成员方法.静态成员变量.    优缺点:   优点:使用时不用创建对象,节约了空间.使得代 ...

  8. （深搜）Sum It Up -- poj --1564

    链接: http://poj.org/problem?id=1564 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88230#probl ...

  9. Mina的ssl加密

    前面写的Mina的示例,都是可以通过telnet登录的,并且可以相互交互. 现在采用ssl加密的方式,对建立连接时,进行加密连接.这样,双方只有统一的加密,然后才可以连接. 密钥的生成之前有说过,里面 ...

  10. MVC4 项目开发日志（1）

    最近一直在定义一个功能全面,层次结构分明的框架.一边学习一边应用.