<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery简单计算器</title>
</head>
<style>
.container{
width: 230px;
height: 230px;
background: rgb(196,210,224);
margin: 80px auto;
padding: 5px;
}
.top{
width: 230px;
height: 60px;
background-color:#999;
}
.bottom{
width: 230px;
height: 170px;
}
.left{
width: 155px;
height: 170px;
float: left;
}
.left input{
width: 40px;
height: 40px;
margin-top: 3px;
}
.right{
float: left;
width: 75px;
height: 170px;
}
.right input{
width: 75px;
height: 30px;
margin-top: 4.3px;
}
.top p{
line-height: 30px;
text-align: right;
height: 30px;
margin: 0;
}
</style>
<body>
<div class="container">
<div class="top">
<p class="text1"></p>
<p class="text2">0</p>
</div>
<div class="bottom">
<div class="left">
<input type="button" name="" id="" value="7" />
<input type="button" name="" id="" value="8" />
<input type="button" name="" id="" value="9" />
<input type="button" name="" id="" value="4" />
<input type="button" name="" id="" value="5" />
<input type="button" name="" id="" value="6" />
<input type="button" name="" id="" value="1" />
<input type="button" name="" id="" value="2" />
<input type="button" name="" id="" value="3" />
<input type="button" name="" id="" value="c" class="c"/>
<input type="button" name="" id="" value="0" />
<input type="button" name="" id="" value="." />
</div>
<div class="right">
<input type="button" name="" id="" value="+" />
<input type="button" name="" id="" value="-" />
<input type="button" name="" id="" value="*" />
<input type="button" name="" id="" value="/" />
<input type="button" name="" id="" value="=" />
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
// var txt=''
$('.left input:not(.c)').click(function(){
// txt+=$(this).val()
// $('.text2').text(txt)
if($('.text2').text().indexOf('.')!=-1){ //如果有点了,再次判断
// if($(this).val()==='.'){ //如果新输入的有点，不添加
// }else{ //如果新添加的没有点，继续将输入的累加到text2
// $('.text2').append($(this).val())
// }
if($(this).val()!='.'){ //逻辑等于上面注释的部分
$('.text2').append($(this).val())
}
}else if($('.text2').text()==='0'){
if($(this).val()==='.'){
$('.text2').append($(this).val())
}else{
$('.text2').text($(this).val())
}
}else{
$('.text2').append($(this).val()) //如果没有点就一直累加
}
})
$('.right input:not(:last)').click(function(){ //点击右边的按钮，除了最后一个不添加点击事件
$('.text1').text($('.text2').text()+$(this).val())
$('.text2').text('')
})
$('.right input').last().click(function(){ //右边按钮的最后一个添加点击事件
var t1=$('.text1').text();
var t2=$('.text2').text();
// var t=$(".text1").text();
// console.log($(".text1").text()[t.length-1]);
// var t3=t1+t2
$('.text2').text(count[t1[t1.length-1]](t1,t2))
$('.text1').append(t2)
})
var count={
'+':function(a,b){
return parseFloat(a)+parseFloat(b)
},
'-':function(a,b){
return parseFloat(a)-parseFloat(b)
},
'*':function(a,b){
return parseFloat(a)*parseFloat(b)
},
'/':function(a,b){
return parseFloat(a)/parseFloat(b)
}
}
$('.c').click(function(){
$('.text1').text('')
$('.text2').text('0')
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号