用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 ...
随机推荐
- Activity通过bundle传递数据
从AActivity.java向BActivity.java传递数据: 建立AActivity.java文件建立bundle: 1 public class AActivity extends App ...
- ElasticSearch内部基于_version乐观锁控制机制
1.悲观锁与乐观锁机制 为控制并发问题,我们通常采用锁机制.分为悲观锁和乐观锁两种机制. 悲观锁:很悲观,所有情况都上锁.此时只有一个线程可以操作数据.具体例子为数据库中的行级锁.表级锁.读锁.写锁等 ...
- CPU乱序执行基础 —— Tomasulo算法及执行过程
朋友们可以关注下我的公众号,获得最及时的更新: IBM 360/91浮点单元最先实现Tomasulo算法从而允许乱序执行.360体系只有4个双精度浮点寄存器,限制了编译器调度的有效性.而且,IBM 3 ...
- 【简记】Linux界面连接WPA2-Enterprise Wifi
背景 公司从去年(2021)年开始使用 WPS2-Enterprise 安全方式,我的笔记本来公司就得用网线才能连(因为当时没意识到,只是以为连不上可能和驱动有关系,这是大错特错的理解..)赶上今天去 ...
- 在数据结构与算法中 传值方式（C语言）
传值方式 前言 当初学顺序链表的时候,书上就出现了这样的语言,如下所示: Status InitList_Sq(SqList &L) { //构造一个空的线性表L. L.elem = (Ele ...
- CSS 选择器学习总结
1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...
- WPF之VisualTreeHelper
/// <summary> /// </summary> /// <typeparam name="T">< ...
- 自动化运维之SaltStack初探
1.1.基础环境 linux-node1(master服务端) 192.168.31.46 CentOS 6.6 X86_64 linux-node2(minion客户端) 192.168.31.47 ...
- 内网渗透----Token 窃取与利用
0x00 前言 在之前的文章<渗透技巧--程序的降权启动>介绍了使用 SelectMyParent 降权的方法,本质上是通过 token 窃取实现的.这一次将要对 token 窃取和利用做 ...
- luoguP6623 [省选联考 2020 A 卷] 树(trie树)
luoguP6623 [省选联考 2020 A 卷] 树(trie树) Luogu 题外话: ...想不出来啥好说的了. 我认识的人基本都切这道题了. 就我只会10分暴力. 我是傻逼. 题解时间 先不 ...