Js 简易iphone计算器

界面展示：

1.实现普通计算器的基本功能：
加减乘除
取百分数
取相反数
全部清除

2.思路

（1）页面布局

（2）其他操作功能在代码里有注释
（3）不足：
不明白为什么取反时，都要点击两次取反按钮才实现

3.代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><title>Calculate</title><style type="text/css">/*取消默认样式*/*{margin:0;padding: 0;}ul{list-style: none;}/*清除浮动*/.fc:after{content: '';overflow: hidden;clear: both;display:block;}#cal{width: 400px;background-color: rgba(0,0,0);/*border-radius:30px;*/margin: 50px auto;}#cal .blank,#cal .input{width: 100%;height: 60px;/*background-color: rgba(0,0,0,.8);*/}
/*      #cal .blank{border-radius: 30px;}*/#cal .input input{width: 400px;height: 100%;padding-right: 10px;text-align: right;background-color: transparent;border:none;outline: none;font-size: 50px;color: #fff;pointer-events: none;/*去掉聚焦线*/}#cal .btns{width: 100%;height: 500px;}/*#cal .btns ul{}*/#cal .btns ul li{width: 80px;height: 80px;background-color: #333;/*opacity: 0.9;*/border-radius: 50%;float: left;margin: 10px 10px;font-size: 28px;text-align: center;line-height: 80px;font-weight: 500;color: #fff;cursor: pointer;}/*0的宽度是其他数字按钮的两倍*/#cal .btns ul .zero{width: 180px;border-radius: 40px;/*text-align: left;*//*字体靠左*/}#cal .btns ul .operate1{background-color: #C0C0C0;color: #000;}#cal .btns ul .operate2{background-color: #ff9900;}</style>
</head>
<body><div id="cal"><div class="blank"></div><div class="input"><input type="text" maxlength="14" value=""></input></div><div class="btns"><ul class="fc"><li class="operate1" onclick="func('AC')">AC</li><li class="operate1" onclick="func('+/-')">+/-</li><li class="operate1" onclick="func('%')">%</li><li class="operate2" onclick="func('/')">/</li><li onclick="func('7')">7</li><li onclick="func('8')">8</li><li onclick="func('9')">9</li><li class="operate2" onclick="func('*')">x</li><li onclick="func('4')">4</li><li onclick="func('5')">5</li><li onclick="func('6')">6</li><li class="operate2" onclick="func('-')">-</li><li onclick="func('1')">1</li><li onclick="func('2')">2</li><li onclick="func('3')">3</li><li class="operate2" onclick="func('+')">+</li><li class="zero" onclick="func('0')">0</li><li onclick="func('.')">.</li><li class="result operate2" onclick="func('=')">=</li></ul></div></div><script type="text/javascript">//取消选择所有页面的功能document.onselectstart = document.ondrag = function() { return false;}var oInput = document.getElementsByTagName('input')[0];// 取反时 sign *= -1 即可var sign = 1;// 给小数点加锁，防止出现 1.24.35 的情况var flag = true;function func(x){// 点击等于号时用 eval（）函数计算if(x === '='){this.oInput.value =  this.oInput.value == ''?'':eval(this.oInput.value);}// 清空else if(x==='AC'){this.oInput.value = '';}// 取百分号 等于小数点向左移动两位，当合算字符串为空时，返回空值else if(x==='%'){if(this.oInput.value){this.oInput.value /= 100;}else{return;}}// 取反else if(x === '+/-'){//不清楚为什么要点击两下sign *= -1;if(this.oInput.value === '-'){this.oInput.value = '';}else if(this.oInput.value){this.oInput.value *= sign;}else{this.oInput.value += '-';   }}// 防止开头出现 01，02，03，04... 的情况else if(this.oInput.value === '0' && x !== '.'){this.oInput.value = x;return;}// 小数点的处理else if(x === '.'){if(flag){this.oInput.value += x; flag = false;}else this.oInput.value += ''; }   // 当点击 +-*/ 的数字运算符时，为‘.’开锁else if(x === '+' || x === '-' || x === '*' || x === '/'){flag = true;this.oInput.value += x;}else{this.oInput.value += x;}}</script>
</body>
</html>

Js 简易iphone计算器相关推荐

HTML、CSS与JS实现简易iPhone计算器
效果如图源码,通俗易懂 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
JS 简易的计算器
一个输出为: 代码: 1 <!DOCTYPE html> 2 <html> 3 <script type="text/javascript" src ...
js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
html计算天数,Javascript实现简易天数计算器
本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下效果图: 功能: 1. 支持选择日期: 2. 自动计算闰年: 3. 支持使用当前日期. 代码: (1)h ...
[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!
目录事件错误处理 1.隐藏/显示文字 2.简单的加法计算器效果: ★★★3.简易利息计算器效果: 事件 javascript允许html与用户交互的行为例如:鼠标点击事件 & ...
制作一个简易的计算器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
用DW制作简易的计算器
用DW敲出一个简易的计算器学JS之前感觉有点难,然后学了JS感觉很简单只要有了思路就可以敲出来. 下面是敲完之后的样子源代码结构很简单如下: 敲样式可以随便敲,看起来整齐一点就OK了,我是这样敲的: ...
用JavaScript写iPhone计算器
用JS写一计算器作为练习,基本实现iPhone计算器的功能和逻辑,分享一下设计过程: 1. 设计核心界面 2. 静态动态效果 3. 完成运算逻辑完成后计算机能实现: 完成加减乘除取余等基本运算直接 ...

Js 简易iphone计算器

Js 简易iphone计算器相关推荐

最新文章

热门文章