javascript之计算器

原创
2016/05/12 20:05
阅读数 23

 

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf8" />
		<style>
			*{margin:0;padding:0;border:0;outline:0;box-sizing:border-box;}
			ul{list-style:none;}
			div{position:relative;width:320px;height:175px;margin:100px auto;border:1px solid #0a8;}
			li{height:35px;border-bottom:1px solid #eee;}
			li:first-child{text-align:center;}
			span{display:inline-block;width:25%;height:35px;line-height:35px;text-align:center;cursor:pointer;}
			span:hover{background-color:#0a8;color:#eee;}
			input{position:relative;display:inline-block;width:90%;height:30px;border:1px solid #eee;margin-top:2px;padding:0 10px;}
		</style>
	</head>
	<body>
		<div id="calc">
			<ul id="ul">
				<li><input type="text" id="res"></li>
				<li><span id="1">1</span><span id="2">2</span><span id="3">3</span><span id="+">+</span></li>
				<li><span id="4">4</span><span id="5">5</span><span id="6">6</span><span id="-">-</span></li>
				<li><span id="7">7</span><span id="8">8</span><span id="9">9</span><span id="*">*</span></li>
				<li><span id=".">.</span><span id="c">c</span><span id="=">=</span><span id="/">/</span></li>
			</ul>
		</div>
		<script>
			var ID = function(o){return document.getElementById(o);},i = 0;
			ul.addEventListener("click",function (e) {
				var id = e.srcElement.id,r = ID('res');
				if(id != 'c' && id != '='){
					i == 1 && (i = 0,r.value = '');
					r.value += e.srcElement.id;
				}else{
					id == 'c' && (r.value = '');
					id == '=' && (r.value = eval(r.value),i = 1);
				}
				return true;
			},false);
		</script>
	</body>
</html>

 

展开阅读全文
打赏
2
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
2
分享
返回顶部
顶部