利用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。
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
