用JS写一个计算器（兼容手机端）

先看成果：
1.PC端

2.

首先确立html,有哪些东西我们要知道。布局大概的样子在心里有个数

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瑞雪的计算器</title>

    <link rel="stylesheet" href="css/index.css">

    <script src="js/index.js" charset="utf-8"></script>

  </head>

  <body>

    <header>

        <li>LRX</li>temmo

    </header>

    <div class="calculator_box">

      <!-- //显示屏 -->

      <div class="display" id="dispaly">

      </div>

      <!-- 功能条 -->

      <div class="function">

        <button type="button" name="button" onclick="empty()">清空</button>

        <button type="button" name="button" onclick="back()">撤回</button>

        <div class="music">

        </div>

      </div>

      <div class="content">

      <!-- 数字框 -->

      <div class="number_box">

        <table>

          <tr>

            <td onclick="calculator()">9</td>

            <td onclick="calculator()">8</td>

            <td onclick="calculator()">7</td>

          </tr>

          <tr>

            <td onclick="calculator()">6</td>

            <td onclick="calculator()">5</td>

            <td onclick="calculator()">4</td>

          </tr>

          <tr>

              <td onclick="calculator()">3</td>

              <td onclick="calculator()">2</td>

              <td onclick="calculator()">1</td>

          </tr>

          <tr>

            <td colspan="2" onclick="calculator()">0</td>

            <td onclick="calculator()">.</td>

          </tr>

        </table>

      </div>

      <!-- 加减框 -->

      <div class="calculator">

        <table>

          <tr>

            <td onclick="calculator()">+</td>

            <td onclick="calculator()">-</td>

          </tr>

          <tr>

            <td onclick="calculator()">*</td>

            <td onclick="calculator()">/</td>

          </tr>

        </table>

        <button type="button" name="button" id="r_out" onClick="resultscalcaulte()">=</button>

      </div>

    </div>

    </div>

    <footer><img src="img/cat4.png" alt=""></footer>

  </body>

</html>

不过现在样式还很乱，不适合继续写JS所以，我开始设计样式，先在纸上画一画大概的样子............
写CSS代码：

body{

  margin: 0;

  background:#d67f5e;

}

header{

  text-align: center;

  background: rgb(121, 118, 138);

  margin-bottom: 50px;

  height: 40px;

  line-height: 40px;

  color: #fff;

}

header li{

  text-align: center;

  width: 10%;

  background: rgb(148, 75, 75);

  border-top-right-radius: 20px;

  border-bottom-right-radius: 20px;

}

header li:hover{

  position: relative;

  margin-top: -34px;

  transition: 0.5s;

}

table{

  text-align: center;

}

.calculator_box{

  width: 450px;

  height: 420px;

  background: rgb(112, 124, 152);

  margin: 0 auto;

  padding: 15px 0;

  border: 7px double #b0b0b0;

  border-radius: 30px;

  background-image: linear-gradient(to bottom, #5b7896, #00587b 32%);

  box-shadow: 0 3px 33px 8px rgba(22, 6, 6, 0.4), inset 0 0 28px 3px #4d4952;

}

.display{

  width: 90%;

  margin: 0 auto;

  height: 70px;

  background: rgb(204, 194, 192);

  border-radius: 8px;

  background-color: #3f3c3b;

  box-shadow: 0 0 0px 1px #252829;

  font-size: 40px;

  color:#ffffff;

  text-align: right;

  line-height: 70px;

  padding-right: 10px;

}

.function button{

  height: 30px;

  width: 60px;

  margin: 6px;

  border-radius: 15px;

  background-color: #b58068;

  color: white;

  text-shadow: 0 0 18px #2f2402;

  box-shadow: 0 0 0px 1px #4d4c51;

}

.number_box,.calculator,.music{

  display: inline-block;

}

.content{

  width: 90%;

  margin: 0 auto;

  position: relative;

}

.function{

  margin: 10px auto;

  width: 90%;

  margin: 13 auto;

  position: relative;

}

.music{

  border-top: 2px double #3c94c0;

  border-bottom:2px double #3c94c0;

  width: 250px;

  height: 5px;

  border-radius: 3px;

}

.number_box tr,.calculator tr{

  width: inherit;

}

.number_box td{

  width: 98px;

  height: 60px;

  background: rgb(235, 232, 233);

  border-radius: 5px;

  box-shadow: inset 0 0 7px 3px #c9c8c8;

}

.number_box td:active{

    background:#6c6a6a;

    box-shadow: inset 0 0 0px 0px #c9c8c8;

    transition: 0.5s;

    color: #fff;

}

.calculator{

  width: 88px;

  position: relative;

  top: -47px;

  text-align: center;

  font-size: x-large;

}

.calculator td{

  width: 44px;

  height: 72px;

  border-radius: 3px;

  text-shadow: 0px 0px 10px #1f1f1f;

  background-color: rgb(185, 185, 185);

  box-shadow: inset 0 0 8px 2px #9a9a9a;

  color: #ffffff;

}

.calculator td:active{

  box-shadow: inset 0 0 0px 0px ;

  background-color:#9c1414;

  transition: 0.5s;

}

#r_out{

  width: 86px;

  height: 100px;

  border-radius: 8px;

  margin-top: 2px;

  color: aliceblue;

  background-color: #b55f5f;

  text-shadow: 0 0 12px black;

  box-shadow: inset 0 0 20px 3px #876161;

}

#r_out:active{

  background-color:#55595e;

  box-shadow: inset 0 0 0px 0px;

  transition: 0.5s;

}

footer img{

  width: 302px;

  height: 267px;

}

footer img:hover{

  margin-right: -150px;

  transition: 0.5s

}

@media only screen and (max-width: 500px) {

    .calculator_box{

      width: 95%;

      height: 390px;

      margin: 0 auto;

    }

    .number_box td{

      width: 70px;

      height: 57px;

    }

    .calculator{

      margin-top: -47px;

    }

    .calculator td{

      width: 44px;

      height: 66px;

    }

    .music{

      width: 165px;

    }

    .content {

      width: 81%;

      margin: 0 auto;

      position: relative;

    }

    header li{

      border-radius: 0px;

      border-bottom-right-radius: 20px;

      border-bottom-left-radius: 20px;

    }

}

@media only screen and (max-width: 400px){

  .calculator_box{

    width: 95%;

    height: 390px;

    margin: 0 auto;

  }

  .number_box td{

    width: 57px;

    height: 57px;

  }

  .calculator{

    margin-top: -47px;

    margin-left: 3px;

  }

  .calculator td{

    width: 44px;

    height: 66px;

  }

  .music{

    width: 154px;

  }

}

@media only screen and (max-width: 360px){

  .content {

    width: 89%;

  }

  .calculator_box{

    width: 95%;

    height: 390px;

    margin: 0 auto;

  }

  .number_box td{

    width: 64px;

    height: 57px;

  }

  .calculator{

    display: inline-block;

    margin-top: -47px;

    margin-left: 2px;

  }

  .calculator td{

    width: 44px;

    height: 66px;

  }

  .music{

    width: 154px;

  }

}

@media only screen and (max-width: 320px){

  .number_box td{

    width: 53px;

    height: 57px;

  }

}

用了好些个媒体查询！手机端必须做好，因为计算器，手机用的比较多，所以响应式必须做好

最后就是JS代码啦~

window.onload = function() {

     FastClick.attach(document.body);

 }

var display;

var result="";

var calresults;

display=document.getElementById("dispaly");

function calculator(){

  result+=event.srcElement.innerText;

  // alert(result);

  dispaly.innerText=result;

}

function resultscalcaulte(){

  var display=document.getElementById("dispaly");

  calresults=eval(result);

  display.innerText=calresults;

}

function empty(){

  result="";

  dispaly.innerText=result;

}

function back(){

  if (result!="") {

    result=result.substring(0, result.length - 1);

    dispaly.innerText=result;

  }

}

然后就把计算器发给小伙伴们用吧！
不过在手机上按键会有延迟~正在解决ing

用JS写一个计算器（兼容手机端）的更多相关文章

使用JS写一个计算器
先上效果图: 简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能. 根据预期效果,可以确定页面中的布局要用到table tr td. 所以先放上页面布局,table的边框宽度border,c ...
《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
用VBA写一个计算器
着急的玩家可以跳过“============”部分 ======================================可以跳过的部分开始==================== ...
分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
html5 canvas手写字代码(兼容手机端)
html5 canvas手写字代码(兼容手机端) <pre><!DOCTYPE html><html><head> <title>画板实验& ...
前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
如何使用 js 写一个正常人看不懂的无聊代码
如何使用 js 写一个正常人看不懂的无聊代码代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

随机推荐

Java：Collections
说明工具类,提供了许多静态方法,用于操作集合. 模块:java.util.Collections 方法:全是static方法,使用时直接Collections.xxx( ... ) 返回值类型方法 ...
Django后台管理的使用
Django后台管理的使用参考文章:https://www.runoob.com/django/django-admin-manage-tool.html 1.编写好models 直接在admin. ...
搞懂MySQL（各种）索引类型及其区别
索引的概念介绍: 1.聚集索引聚集索引:指索引项的排序方式和表中数据记录排序方式一致的索引也就是说聚集索引的顺序就是数据的物理存储顺序.它会根据聚集索引键的顺序来存储表中的数据,即对表的数据按索 ...
面试官：我们来聊一聊Redis吧，你了解多少就答多少
哈喽!大家好,我是小奇,一位不靠谱的程序员小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧文章持续更新,建议收藏关注一.前言作为一名Java程 ...
linux文件目录权限操作
设置修改文件的属主或修改文件属组 [root@localhost ~]# ll test.txt -rw-r--r--. 1 root root 0 Oct 21 12:01 test.txt [ro ...
关于mysql8.0 caching_sha2_password和sha256_password认证方式
今天开发上线新系统反馈数据库连接有问题.自己分别在命令行下及navicat进行连接发现,发现root用户密码在命令行下可以正常连接,但是新建立的子用户连接不上.于是就换成管理员密码.立即就连接上了.看 ...
vue结合antV/g6 实现网络拓扑图
最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...
os模块——关于在程序框中如何进行文件的查找和建立新的文件夹
hadoop-SSH免密登录配置
一:配置基础环境一.修改主机名修改 master 机器主机名 [root@server ~]# hostnamectl set-hostname master-wzg [root@server ~ ...
ssh编译安装后重启失败问题
编译好的ssh重启出现如下报错这个原因是因为systemd与ssh不兼容造成的删掉服务 rm /usr/lib/systemd/system/sshd.service 重启 /etc/init.d ...

用JS写一个计算器（兼容手机端）

用了好些个媒体查询！手机端必须做好，因为计算器，手机用的比较多，所以响应式必须做好

用JS写一个计算器（兼容手机端）的更多相关文章

随机推荐

热门专题