Js 简易iphone计算器

界面展示:
Js 简易iphone计算器_第1张图片

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

2.思路

(1)页面布局
Js 简易iphone计算器_第2张图片
(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>

你可能感兴趣的