效果图：

电脑端：

手机端：

源码：

<!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. 2018.06.30 BZOJ 2342: [Shoi2011]双倍回文（manacher）

    2342: [Shoi2011]双倍回文 Time Limit: 10 Sec Memory Limit: 128 MB Description Input 输入分为两行,第一行为一个整数,表示字符串 ...

  2. 设定Word段落的背景色

    段落背景不同于文字区别.很多新接触word的朋友都找不到怎么弄. 先把光标停留在需要设置的段落文字上,或者选择需要设置的段落文字. 点击段落里的边框和底纹,如图 在弹出框中选择底纹. 选择需要填充的颜 ...

  3. c语言学生信息管理系统-学习结构体

    #include<stdio.h> #include<stdlib.h> //结构体可以存放的学生信息最大个数,不可变变量 ; //学生信息结构体数组,最多可以存放100个学生 ...

  4. 201709013工作日记--Android异步通信AsyncTask

    参考相关博客:http://blog.csdn.net/liuhe688/article/details/6532519 在Android中实现异步任务机制有两种方式,Handler和AsyncTas ...

  5. spring mvc静态资源请求和<mvc:annotation-driven>

    自己看了官方文档,也到网上查了下,目前理解如下: <mvc:annotation-driven/>相当于注册了DefaultAnnotationHandlerMapping和Annotat ...

  6. [mysql] mysql如何实现更新一条记录中某个字段值的一部分呢？

    场景:在平常我们使用word文档等等office办公软件时,我们常会使用搜索->替换的功能. mysql: 在mysql 中有时候,我们也需要这样子的实现: 实现 SQL 语句: update ...

  7. smarty-2014-02-28

    使用smarty,在tpl文件中如何使用相对路径调用css&javascript文件,实际上这个相对路径的参照物就是以调用该tpl文件的php文件来写. 假如,我在index.php这个文件中 ...

  8. 发个招聘贴，魔都求手游C++后端，UNITY前端，开发实习生

    上海游旺网络科技有限公司成立于2015年5月,是一家极具潜力的新创移动游戏公司.公司初创团队均来自腾讯,盛大,畅游,墨麟,蜗牛等知名互联网公司,公司创始人团队参与制作过<鬼吹灯><Q ...

  9. CxGrid导出Excel时清除颜色的设置

    CxGrid导出Excel时清除颜色的设置 (2011-04-25 16:33:23) 转载▼ 标签: it 分类: Delphi http://www.radxe.com/?p=170 cxgrid ...

  10. Thread in depth 4:Synchronous primitives

    There are some synchronization primitives in .NET used to achieve thread synchronization Monitor c# ...