<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin:0px; padding:0px; } body{ text-align: center; margin-top: 50px; } .zt{ border: 1px rgba(128, 128, 128, 0.23) solid; background-color: #d9e4f1; width: 200px; height: 300px; margin: 0px auto; } #js{ border:1px lightgray solid; width:190px; height:65px; margin: 5px auto; } #sz{ width:185px; height:30px; margin: 0px auto; text-align: right; } #result{ text-align: right; width:185px; height:30px; margin: 0px auto; } #key #clear{ width:80px; height:35px; margin:7px 10px 5px 5px; } #key #del{ width:80px; height:35px; } #key button{ width:40px; height:35px; margin:3px 4px 5px 5px; background-color: #eff4f9; border:1px lightgray solid; } #key button:hover{ background-color: lightyellow; } </style> <script type="text/javascript"> window.onload=function () { initJQ(); } var resultObj; var szObj; var flag1=false; var o=''; var qianRs; function initJQ() { resultObj=document.querySelector("#result"); szObj=document.querySelector("#sz"); var btns=document.querySelectorAll("button"); for (i=0;i<btns.length;i++){ var btn=btns.item(i); switch (btn.innerHTML){ case 'c': btn.onclick=function () { resultObj.innerHTML="0"; } break; case 'x': btn.onclick=function () { resultObj.innerHTML=resultObj.innerHTML.substr(0,resultObj.innerHTML.length-1); if(resultObj.innerHTML.length==0){ resultObj.innerHTML=0; } } break; case '.': btn.onclick=function () { if(resultObj.innerHTML.indexOf('.')==-1){ resultObj.innerHTML+=this.innerHTML; } }; break; case '=': btn.onclick=function () { szObj.innerHTML=""; jisuan(); qianRs=0; o=""; } break; case '+': case '-': case '/': case '*': btn.onclick=function () { if(!flag1){ szObj.innerHTML+=resultObj.innerHTML+this.innerHTML; jisuan(); qianRs=resultObj.innerHTML; o=this.innerHTML; flag1=true; } }; break; default: btn.onclick=function () { //resultObj.innerHTML+=this.innerHTML; if(flag1){ resultObj.innerHTML=0; flag1=false; } resultObj.innerHTML=parseFloat(resultObj.innerHTML+this.innerHTML); } } } } function jisuan() { if(qianRs&&o.length>0){ switch (o){ case '+': qianRs = parseFloat(qianRs)+parseFloat(resultObj.innerHTML); break; case '-': qianRs = parseFloat(qianRs)-parseFloat(resultObj.innerHTML); break; case '*': qianRs = parseFloat(qianRs)*parseFloat(resultObj.innerHTML); break; case '/': qianRs = parseFloat(qianRs)/parseFloat(resultObj.innerHTML); break; } resultObj.innerHTML=qianRs; } } </script> </head> <body> <div class="zt"> <div id="js"> <div id="sz"></div> <div id="result">0</div> </div> <div id="key"> <p><button >c</button><button>x</button></p> <p><button >7</button><button >8</button><button>9</button><button>/</button></p> <p><button >4</button><button >5</button><button >6</button><button>*</button></p> <p><button >1</button><button >2</button><button >3</button><button>-</button></p> <p><button>.</button><button >0</button><button>=</button><button>+</button></p> </div> </div> </body> </html>
原文链接：https://blog.csdn.net/ZQ914/article/details/72831822?ops_request_misc=&request_id=51518984a8464d2982ff13a2ff5af95b&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~koosearch~default-23-72831822-null-null.268%5Ev1%5Econtrol&utm_term=%E6%BE%B3%E6%B4%B2%E7%94%9F%E6%B4%BB
