计算器1

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Calculator-计算器</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-family:"宋体";
}
#box{
width:240px;
height:284px;
position:relative;
margin:100px auto;
background:url("images/bj.jpg");
padding:10px;
border-radius:10px;
box-shadow:2px 2px 6px #000;
}
#box img{
display:block;
position:absolute;
top:0;
left:0;
}
#icon{
width:240px;
height:30px;
color:#fff;
font-weight:bold;
line-height:30px;
background:#f66;
border-radius:10px;
}
#icon i{
display:block;
width:20px;
height:20px;
background:url("images/calculator-01.png");
float:left;
margin:5px 5px 0 5px;
}
#show{
width:226px;
height:20px;
text-align:right;
font-size:12px;
margin:10px auto 0;
padding-right:10px;
border:none;
outline:none;
}
#show1{
width:226px;
height:40px;
font-size:24px;
padding-right:10px;
text-align:right;
outline:none;
border:none;
}
#but-key div input{
display:inline-block;
width:50px;
height:40px;
cursor:pointer;
font-size:18px;
text-align:center;
font-weight:bold;
border-radius:4px;
outline:none;
}
#but-key div input:hover{
color:red;
}
#key-box{
float:left;
width:176px;
margin-right:12px;
}
#key{
width:176px;
margin-bottom:5px;
}
#key input{
margin:5px 5px 0 0;
}
#cpt{
float:left;
width:52px;
margin-top:5px;
}
#cpt input{
margin:0 0 5px 0;
}
#result{
width:118px !important;
}
.on{
margin-right:0px !important;
}
hr{
width:234px;
}
</style>
</head>
<body>
<div id='box'>
<div id='icon'>
<i></i>计算器
</div>
<input type="text" value="" id="show" /> <hr/>
<input type="text" value="" id="show1" />

<div id="but-key">
<div id="key-box">
<div id="key">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" class="on" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" class="on" />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" class="on" />
</div>
<div>
<input type="button" value="=" id="result" />
<input type="button" value="C" id="rest" />
</div>
</div>
<div id="cpt">
<input type="button" value="-" id="one" />
<input type="button" value="+" id="two" />
<input type="button" value="*" id="three" />
<input type="button" value="/" id="four" />
</div>
</div>

for ( var i = 0 ; i < oKeyIn.length ; i++)
{

oKeyIn[i].index = i;
oKeyIn[i].onclick = function (){
oShow1.value += this.value;
}
oOne.onclick = fly;
oTwo.onclick = fly;
oThr.onclick = fly;
oFor.onclick = fly;

function fly(){
oShow.value = oShow1.value;
oShow1.value = this.value;
}

oRset.onclick = function(){
oShow.value = '';
oShow1.value ='';
}

oResult.onclick = function(){
switch( oShow1.value.charAt(0) )
{
case '+':
//r = parseInt( oShow1.value.replace('+','') );
//oShow1.value = r + Number( oShow.value );
oShow1.value = eval(oShow1.value)+eval(oShow.value);
break;

case '-':
// r = parseInt( oShow1.value.replace('-','') );
// oShow1.value = Number( oShow.value ) - r ;
oShow1.value = eval(oShow1.value)+eval(oShow.value);
break;

case '*':
r = Number( oShow1.value.replace('*','') );
oShow1.value = Number( oShow.value ) * r;
break;

case '/':
r = Number( oShow1.value.replace('/','') );
oShow1.value = Number( oShow.value ) / r;
break;
}
if( isNaN(oShow1.value) ) oShow1.value = '';
}
}

</script>

</body>
</html>

posted on 2016-04-20 17:55 BiLLホ€ィ訁阅读(97) 评论(0) 收藏举报