新手来找虐哈哈哈.
JavaScript代码
//获得输入的键值 var show = document.querySelector(".screen input"); var keys = document.querySelector(".keys"); //console.log(show.value) //给每个按钮添加事件 keys.addEventListener("click",function(e){ e=e||window.event; var target = e.target||e.srcElement; e.preventDefault(); if(target.value=='C'){ target.onclick=clearBoth(); }else if(target.value=='←'){ target.onclick=delString(); }else if(target.value=='='){ target.onclick=getResult(target); }else if(target.nodeName.toUpperCase()=='DIV'){ //取消了点击非按钮部分显示undefined return -1; }else{ target.onclick=connectStr(target); } },false); //运算 function getResult(target){ var isAdd = show.value.indexOf('+'); var isSub = show.value.indexOf('-'); var isMul = show.value.indexOf('×'); var isDivi = show.value.indexOf('÷'); if(isAdd>=0){ var result=Number(show.value.split('+')[0])+Number(show.value.split('+')[1]); show.value=result; }else if(isSub>=0){ var result=Number(show.value.split('-')[0])-Number(show.value.split('-')[1]); show.value=result; }else if(isMul>=0){ var result=Number(show.value.split('×')[0])*Number(show.value.split('×')[1]); show.value=result; }else if(isDivi>=0){ var result=Number(show.value.split('÷')[0])/Number(show.value.split('÷')[1]); show.value=result; }else{ return; } } //清空 function clearBoth(){ show.value="0"; } //退格 function delString(){ var str= String(show.value); if(str.length==0){ return -1; }else if(str.length==1){ show.value='0'; } else{ show.value = str.substr(0,str.length-1); console.log(str.length); } return str; } function connectStr(target){ if(show.value=='0'){ show.value=""; show.value=show.value+target.value; }else{ show.value=show.value+target.value; } }html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单计算器</title> <link rel="stylesheet" type="text/css" href="css/calculator.css"> </head> <body> <div class="container"> <div class="screen"> <input type="text" value="0" autocomplete="none"> </div> <div class="keys"> <!--第一排--> <input type="button" value="7" class="button"> <input type="button" value="8" class="button"> <input type="button" value="9" class="button"> <input type="button" value="←" class="button"> <input type="button" value="C" class="button"> <!--第二排--> <input type="button" value="4" class="button"> <input type="button" value="5" class="button"> <input type="button" value="6" class="button"> <input type="button" value="×" class="button"> <input type="button" value="÷" class="button"> <!--第三排--> <input type="button" value="1" class="button"> <input type="button" value="2" class="button"> <input type="button" value="3" class="button"> <input type="button" value="+" class="button"> <input type="button" value="-" class="button"> <!--第四排--> <input type="button" value="0" class="button zero"> <input type="button" value="." class="button zero"> <input type="button" value="=" class="button result"> </div> </div> <script src="js/calculator.js" type="text/javascript"></script> </body> </html>css代码
*{ margin: 0; padding:0; } body{ background-color:rgba(97,144,193,1); } .container{ width: 500px; height: 500px; background-color: rgba(125,189,10,1); margin: 50px auto; border-radius: 5px; box-shadow: 2px 4px 8px rgba(0,0,0,.5); position: relative; } .container>.screen{ width: 460px; height: 60px; margin: 0 auto; padding-top: 30px; } .container>.screen input{ width: 440px; height: 50px; padding:0 10px; border: none; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.8) inset; text-align: right; font-size: 21px; color: #000; } .container>.keys{ width: 460px; height:410px; margin: 0 auto; } .container>.keys input{ width: 80px; height: 50px; float: left; margin-top: 40px; margin-left: 10px; border:none; background-color: rgba(255,255,255,1); border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.5); cursor: pointer; font-size: 20px; line-height: 20px; } .container>.keys>.result{ width: 260px; }希望有大神们看看提点建议哈哈哈~ 思路是不是对的？还可以进行怎样的优化？最后想请教大家怎么实现多个符号的运算？
