<!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>