js實現簡單計算器
阿新 • • 發佈：2022-04-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Js計算器</title> <style> * { margin: 0px; padding: 0px; } .box { margin: 100px auto; width: 325px; border: 1px solid black; padding: 20px; background-color: #BB5557; border-radius: 10px; } .keys { overflow: hidden; padding: 10px; } .keys span { border-radius: 50px; float: left; height: 30px; width: 50px; margin-left: 10px; margin-top: 10px; line-height: 30px; text-align: center; background: #ccc; box-shadow: 2px 2px 2px 2px black; /*盒陰影x偏移量，y偏移量，Bulr模糊程度（半徑）**/ } .outShow p { width: 95%; display: block; height: 80px; border-radius: 20px; /*border: 1px solid #ccc;*/ background: white; color: black; text-align: right; line-height: 80px; font-size: 40px; } .keys span:hover { background: #ecf; } </style> </head> <body> <div class="box"> <div class="outShow"> <p id="outShow"></p> </div> <div class="keys" id="keys"> <span>√</span> <span>±</span> <span>1/x</span> <span>x²</span> <span>x³</span> <span>7</span> <span>8</span> <span>9</span> <span>DEL</span> <span>C</span> <span>4</span> <span>5</span> <span>6</span> <span>÷</span> <span>*</span> <span>1</span> <span>2</span> <span>3</span> <span>+</span> <span>-</span> <span>0</span> <span>00</span> <span>.</span> <span>%</span> <span>=</span> </div> </div> </body> <script> var outShow=document.getElementById("outShow"); var keys=document.getElementById("keys"); var spans=keys.getElementsByTagName("span"); for(var i=0;i<spans.length;i++){ spans[i].onclick=function(){ var getvalue=spans[i].innerHTML; dealCount(getvalue); alert(getvalue); } } function dealCount(count){ switch(count){ case "=": break; case "+": break; case "-": break; case "*": break; case "÷": break; default: outShow.innerHTML=outShow.innerHTML+count.innerHTML; break; } } var outShow = document.getElementById("outShow"); var spans = document.getElementById("keys").getElementsByTagName("span"); var sNum1=""; var op=""; var isNeedClear=false; //給所有按鈕新增點選事件 for(i=0;i<spans.length;i++){ spans[i].onclick=function(){ dealCount(this.innerHTML); } } //實現點選事件 function dealCount(inpuvalue){ switch(inpuvalue){ case "=": var sNum2=outShow.innerHTML; optionsall(sNum1,sNum2,op); break; case "x²": case "x³": case "%": case "√": case "1/x": case "±": case "+": case "-": case "*": case "÷": sNum1=outShow.innerHTML; op=inpuvalue; outShow.innerHTML=op; isNeedClear=true; break; //清空鍵的功能實現 case "C": outShow.innerHTML=""; break; //刪除鍵的功能實現 case "DEL": delNum=outShow.innerHTML outShow.innerHTML=delNum.substring(0,delNum.length-1); break; default: if(isNeedClear==false){ outShow.innerHTML=outShow.innerHTML+inpuvalue; }else{ outShow.innerHTML=inpuvalue; isNeedClear=false; } } } //實現加減乘除功能 function optionsall(sNum1,sNum2,op){ switch(op){ case "+": outShow.innerHTML=parseFloat(sNum1)+parseFloat(sNum2); break; case "-": outShow.innerHTML=parseFloat(sNum1)-parseFloat(sNum2); break; case "*": outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum2); break; case "÷": outShow.innerHTML=parseFloat(sNum1)/parseFloat(sNum2); break; case "√": outShow.innerHTML=Math.sqrt(sNum1); break; case "±": outShow.innerHTML=(0-sNum1); break; case "1/x": outShow.innerHTML=1/parseFloat(sNum1); break; case "%": outShow.innerHTML=parseFloat(sNum1)%parseFloat(sNum2); break; case "x²": outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum1); break; case "x³": outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum1)*parseFloat(sNum1); break; } } </script> </html>