实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>计算器</title>
<!-- 有事，有项目联系我，QQ，821642832 -->
</head>
<body>
<style type="text/css">
body{
width: 600px;
margin: 80px auto 0 auto;
}
#xian{
width: 580px;
border: 1px solid #f2f2f2;
height: 70px;
background: #f2f2f2;
border-radius: 5px;
text-align: right;
font: 35px/2 "bodoni mt black";
padding: 0 8px;
}
.jian{
width: 145px;
background: #f2f2f2;
display: inline-block;
height: 45px;
margin: 5px 0;
font: 600 20px/45px "courier new";
text-align: center;
cursor: pointer;
}
.jian:hover{
background: #e2e2e2;
}
.jian:active{
background: #d2d2d2;
}
</style>
<div id="xian"></div>
<div class="jian yun">+</div>
<div class="jian yun">-</div>
<div class="jian yun">*</div>
<div class="jian yun">/</div>
<div id="shuzi" style="width: 450px;float: left;">
<div class="jian">1</div>
<div class="jian">2</div>
<div class="jian">3</div>
<div class="jian">4</div>
<div class="jian">5</div>
<div class="jian">6</div>
<div class="jian">7</div>
<div class="jian">8</div>
<div class="jian">9</div>
<div class="jian">0</div>
<div class="jian">00</div>
<div class="jian">.</div>
</div>
<div style="width: 150px;float: left">
<div id="tui" class="jian">></div>
<div id="qing" class="jian">ce</div>
<div id="deng" class="jian" style="height: 100px;line-height: 100px;">=</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var lishi='';
var zong='';
var yun='';
var clear=false;
$('#shuzi div').click(function(){
if(clear){
$('#xian').text('');
clear=false;
}
window.zong=$('#xian').text();
var dian=$(this).text();
if(dian=='.' && window.zong.indexOf('.') != -1){
return false;
}
window.zong = String(window.zong) + dian;
$('#xian').text(window.zong);
});
$('.yun').click(function(){
if(lishi=='' && yun == ''){
window.linshi=$('#xian').text();
yun=$(this).text();
}else{
switch(yun){
case '+':
window.linshi=Number(linshi) + Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
case '-':
window.linshi=Number(linshi)-Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
case '*':
window.linshi=Number(linshi)*Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
case '/':
window.linshi=Number(linshi)/Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
}
}
clear=true;
});
$('#deng').click(function(){
switch(yun){
case '+':
window.linshi=Number(linshi) + Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
case '-':
window.linshi=Number(linshi)-Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
case '*':
window.linshi=Number(linshi)*Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
case '/':
window.linshi=Number(linshi)/Number($('#xian').text());
yun=$(this).text();
$('#xian').text(Number(window.linshi));
break;
}
});
$('#qing').click(function(){
window.linshi='';
yun='';
$('#xian').text('');
});
$('#tui').click(function(){
var s=String(window.zong);
s=s.substring(0,s.length-1);
$('#xian').text(s);
window.zong=s;
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
