HTML、CSS与JS实现简易iPhone计算器

效果如图
在这里插入图片描述
源码，通俗易懂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#bg{
				width: 246px;
				height: 400px;
				background: black;
			}
			#screen{
				position: relative;
				top: 10px;
				width: 95%;
				height: 70px;	
				color: white;
				font-size: 50px;
				text-align: right;
				margin-left: 5px;	
				/*background: wheat;*/
			}
			.btn,.btn_grey,.btn_orange{
				width: 50px;
				height: 50px;
				margin: 3px;
				border-radius: 25px;
				text-align: center;
				line-height: 45px;
				color: white;
				font-size: 16px;
				cursor: pointer;
			}
			.btn_grey{
				background: #7C7C7C;
				color: black;
			}
			.btn_orange{
				background: #FC8E39;
			}
			.btn{
				background: #2C2C2C;
			}
			#zero{
				width: 110px;
			}
		</style>
	</head>
	<body>
		<div id="bg">
			<div id="screen"></div>
			<table id="keyboard">
				<tr>
					<td><div class="btn_grey" onclick="del()">del</div></td>
					<td><div class="btn_grey" onclick="cfun()">C</div></td>
					<td><div class="btn_grey" onclick="func('%')">%</div></td>
					<td><div class="btn_orange" onclick="func('/')">/</div></td>
				</tr>
				<tr>
					<td><div class="btn" onclick="func('7')">7</div></td>
					<td><div class="btn" onclick="func('8')">8</div></td>
					<td><div class="btn" onclick="func('9')">9</div></td>
					<td><div class="btn_orange" onclick="func('*')">*</div></td>
				</tr>
				<tr>
					<td><div class="btn" onclick="func('4')">4</div></td>
					<td><div class="btn" onclick="func('5')">5</div></td>
					<td><div class="btn" onclick="func('6')">6</div></td>
					<<td><div class="btn_orange" onclick="func('-')">-</div></td>
				</tr>
				<tr>
					<td><div class="btn" onclick="func('1')">1</div></td>
					<td><div class="btn" onclick="func('2')">2</div></td>
					<td><div class="btn" onclick="func('3')">3</div></td>
					<td><div class="btn_orange" onclick="func('+')">+</div></td>
				</tr>
				<tr>
					<td colspan="2"><div class="btn" id="zero" onclick="func('0')">0</div></td>
					<td><div class="btn" onclick="func('.')">.</div></td>
					<td><div class="btn_orange" onclick="result()">=</div></td>
				</tr>
			</table>
		</div>
		<script>
			var scr=document.getElementById("screen");
			function del(){
				scr.innerHTML="";
			}
			function cfun(){
				var str=scr.innerHTML;
				scr.innerHTML=str.slice(0,str.length-1);
			}
			function func(num){
				var str=scr.innerHTML;
				scr.innerHTML=str+num;
			}
			function result(){
				var str=scr.innerHTML;
				scr.innerHTML=str==""?"":eval(str);
			}
		</script>
	</body>
</html>

其中οnclick="func(‘7’)"可以改为func(this);
this指的是当前对象（div）,其中的数字就是this.innerHTML;
那么函数改为

function func(o){
	result.innerHTML+=o.innerHTML;
}