js計算機
47064 ワード
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> title>
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">1div>
<div class="jian">2div>
<div class="jian">3div>
<div class="jian">4div>
<div class="jian">5div>
<div class="jian">6div>
<div class="jian">7div>
<div class="jian">8div>
<div class="jian">9div>
<div class="jian">0div>
<div class="jian">00div>
<div class="jian">.div>
div>
<div style="width: 150px;float: left">
<div id="tui" class="jian">>div>
<div id="qing" class="jian">cediv>
<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>