用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 ...

随机推荐

Mysql基础学习第二天
Mysql基础学习第二天函数函数:是指一段可以直接被另一段程序调用的程序或代码. 字符串函数数值函数日期函数流程函数字符串函数 MySQL内置很多字符串函数,常用的几个如下: 函数功能 ...
019 Linux tcpdump 抓包案例入门可真简单啊？
目录 1 tcpdump 是什么? 2 tcpdump 常用命令参数 3 tcpdump 抓包wss,配合Wireshark分析 4 tcpdump 抓包白度,配合Wireshark分析) 5 tcp ...
ConvertHelper
DataTable 转Json using Newtonsoft.Json; public static string DataTableToJson(DataTable dt) { varJsonS ...
Python 完美诠释"高内聚"概念的 IO 流 API 体系结构
1. 前言第一次接触 Python 语言的 IO API 时,是惊艳的.相比较其它语言所提供的 IO 流 API . 无论是站在使用者的角度还是站在底层设计者的角度,都可以称得上无与伦比. 很多人在 ...
js json.stringfy()和json.parse()的用法
1.JSON.parse;作用:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象)语法:JSON.parse(text [, reviver])text 必选. 一个有效的 J ...
tp 5 实现邮件发送
参考博客: https://www.cnblogs.com/ccdr/p/14751548.htmlhttps://www.cnblogs.com/ccdr/p/14751548.html 1:qq邮 ...
Mysql备份方案总结性梳理
Mysql备份方案总结性梳理服务器 mysql 日志数据库配置 Mariadb binlog mysql数据库备份有多么重要已不需过多赘述了,废话不多说!以下总结了mysql数据库的几种 ...
七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
elasticsearch高亮之highlight原理
一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...
vue3-关于$props,$parents等引用元素和组件的注意事项
同一个组件内可以使用,但是在不同的组件内,不要用$parents或$refs来访问另一个组件内的数据, 这会使代码的耦合性变高,同时也会让代码的可读性变差, 在不同组件访问数据时,使用props等来传 ...

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

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

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

随机推荐

热门专题