效果图：

电脑端：

手机端：

源码：

<!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. unidac 6.0.1 与kbmmw 的一点小摩擦

    unidac 6.0.1  出来了,虽然支持sql server 直连等新特性,但是由于内部改动比较大, 导致与kmmmw 的集成起来存在有点小问题,就是如果数据库不是interbase 或者fire ...

  2. 微信第三方平台解密报错：Illegal key size

    今天在交接别人代码的时候遇到的,微信第三方平台解密报的错误,原因: 如果密钥大于128, 会抛出java.security.InvalidKeyException: Illegal key size ...

  3. Netty学习第三节Netty的入门级学习

    1.原生NIO存在哪些缺陷     (1)NIO的类库和API繁杂,使用也比较麻烦,需要熟练掌握selector.ServerSocketChannel.SocketChannel.ByteBuffe ...

  4. html5.css3新特性

    块: article section, Nav aside header footer  内容分组 future fig caption main 文本级别标签   time i b  em  str ...

  5. （并查集）Connections in Galaxy War -- zoj --3261 还没写

    链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3261 http://acm.hust.edu.cn/vjudge/ ...

  6. 建立多人协作git仓库/git 仓库权限控制（SSH）

    转载文章请保留出处  http://blog.csdn.net/defeattroy/article/details/13775499 git仓库是多人协作使用的,可以基于很多种协议,例如http.g ...

  7. Back to December -- Taylor Swift

                               Back to December   泰勒·斯威夫特(Taylor Swift),美国乡村音乐女创作歌手,会用木吉他.钢琴演奏. 曾获得美国乡村音 ...

  8. VLC简介及使用说明

    一.简介    VLC的全名是Video Lan Client,是一个开源的.跨平台的视频播放器.VLC支持大量的音视频传输.封装和编码格式,完整的功能特性列表可以在这里获得http://www.vi ...

  9. LeetCode147:Insertion Sort List

    题目: Sort a linked list using insertion sort. 解题思路: 按题目要求,直接进行插入排序 实现代码: #include <iostream> us ...

  10. dstat常用参数组合

    io/if/vm三合一 dstat -cdlmnpsy dstat --top-mem --top-cpu --top-io