利用css与js实现类似手机的计算器

利用css与js实现类似手机的计算器，先来看下这次这个案例的效果：

利用css与js实现类似手机的计算器

很像手机上的计算器吧，其实也就是综合了css以及js的一个小案例吧。实现起来也是相当的简单的，下面是代码，html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>04-计算器</title>

</head>

<body>
	<div>
	    <input id="result" name="result" type="text">
	</div>	
		<ul class="firstul">
			<li onClick="calc(this)">AC</li>
			<li onClick="calc(this)">+/-</li>
			<li onClick="calc(this)">%</li>
			<li onClick="calc(this)">/</li>
		</ul>
		<ul>
			<li onClick="calc(this)">7</li>
			<li onClick="calc(this)">8</li>
			<li onClick="calc(this)">9</li>
			<li onClick="calc(this)">*</li>
		</ul>
		<ul>
			<li onClick="calc(this)">4</li>
			<li onClick="calc(this)">5</li>
			<li onClick="calc(this)">6</li>
			<li onClick="calc(this)">-</li>
		</ul>
		<ul>
			<li onClick="calc(this)">1</li>
			<li onClick="calc(this)">2</li>
			<li onClick="calc(this)">3</li>
			<li onClick="calc(this)">+</li>
		</ul>
		<ul>
			<li onClick="calc(this)" class="zero">0</li>
			<li onClick="calc(this)">.</li>
			<li onClick="calc(this)">=</li>
		</ul>
</body>
</html>

控制样式的css代码：

<style>
	*{
		margin:0;
		padding:0;
	}
	div{
		width:210px;
		height50px;
		margin: 0 auto;
		margin-top:100px;
	}
	input{
		width:204px;
		height:50px;
		background:#202020;
		color:white;
		border:none 0;
		font-size:50px;
		outline:none;
		padding-left:5px;
		box-sizing:border-box;
	}
	ul{
		list-style:none;
		width:210px;
		margin: 0 auto;
	}
	ul::after{
		content:"";
		height:0;
		display:block;
		visibility:hidden;
		clear:both;
	}
	ul li{
		text-align:center;
		line-height:50px;
		width:50px;
		height:50px;
		float:left;
		background:#d2d3d7;
		border-left:1px solid #666;
		border-bottom:1px solid #666;
		cursor:pointer;
	}
	ul li:last-child{
		background:#f88e14;
	}
	.firstul li{
		background:#999;
	}
	/*
	ul:nth-last-of-type(1) li:nth-last-of-type(3){
		width:101px;
	}*/
	.zero{
		width:101px;
	}
	
</style>

下面就是实现计算逻辑的javascript代码了：

<script>
function calc(obj){
	var writeVal=obj.innerHTML;
	var input=document.getElementById("result");
	var val=input.value;
	if(writeVal=="="){
		input.value=eval(val);
	}else if(writeVal=="AC"){
		input.value="";
	}else if(writeVal=="+/-"){
		input.value=-val;
	}else if(writeVal=="%"){
		input.value=val/100;
	}else if(writeVal=="."){
		if(val.indexOf(".")>-1){
			return;
		}else{
			input.value=val+".";
		}
	}else{
		var tmp=val+writeVal;
	    input.value=tmp;
	}
}
</script>

说明：element.innerHTML用于设置或返回元素的内容，相当于jquery里面的$(element).text()。

eval(string)：eval()是js里面的一个全局函数，string是要计算的 JavaScript 表达式或要执行的语句，返回执行的结果。在这里通过使用eval函数避免了你再判断+-*/等运算符号做不同的运算，是一个eval的经典应用，为自己打call。

利用css与js实现类似手机的计算器

相关推荐