效果图：

电脑端：

手机端：

源码：

<!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. 在“开始”菜单中的“运行”一栏输入特定命令打开windows程序

    winver 检查Windows版本   wmimgmt.msc 打开Windows管理体系结构(wmi)   wupdmgr Windows更新程序   wscript Windows脚本宿主设置 ...

  2. Java基础知识学习笔记（一）

    理解面向对象: Java纯粹的面向对象的程序设计语言,主要表现为Java完全支持面向对象的三个基本特征:继承.封装.多态. Java程序的最小单位是类,类代表客观世界中具有某种特征的一类事物,这些类可 ...

  3. Redis总结和提取常用的和重要的命令

    一:Redis的结构和其数据类型(注redis默认端口号是6379) 1)Redis可以部署多套(多个进程不同端口或直接部署在不同主机),每个Redis都可以有多个db,通过select来选择,默认的 ...

  4. MySQL性能调优与架构设计——第 15 章 可扩展性设计之Cache与Search的利用

    第 15 章 可扩展性设计之Cache与Search的利用 前言: 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为 ...

  5. Java中的I/O 线程 网络

    Java学习总结--I/O,线程,网络题目整理 I/O 1.有什么理由必须要用字符流? 答:处理字符数据的语法更方便.自动化字符编码 2.插入哪些代码可以让下面的代码正确编译? Console con ...

  6. (最短路) Heavy Transportation --POJ--1797

    链接: http://poj.org/problem?id=1797 Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K To ...

  7. （连通图 模板题）迷宫城堡--hdu--1269

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1269 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  8. 第1章 敏捷思维—“互联网+”知识工作者必备的DNA

    1.1  强化敏捷思维,落实“十三五”双创战略 史蒂夫·布兰克观察美国创业环境,提出创新生态四个方面:动机.管理工具.文化.基础建设,开创LLP创新创业模式. 1.2  现代敏捷管理发展趋势 1.敏捷 ...

  9. java 执行sql文件

    # 背景 用例执行完毕,期望回滚数据,因此希望执行sql来回滚数据 # 步骤 直接show代码,借助的是mybatis的ScriptRunner /** * 执行xx库下的表备份脚本 * * @par ...

  10. c# 判断当前时间是否在某一时间段内

    //获取当前系统时间并判断是否为服务时间 TimeSpan nowDt = DateTime.Now.TimeOfDay; TimeSpan workStartDT = DateTime.Parse( ...