새소식

인기 검색어

개인공부/HTML5&CSS3

JS 계산기

  • -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div :nth-child(5) { color: red; } div input:nth-child(4) { color: limegreen } div input:nth-child(-n+3) { color: blue; font-weight: bold; } #rsInput { text-align: right; width: 300px; } .upBtn { width: 150px; } .opBtn { margin-left: 10px; margin-right: 10px; } .numBtn { width: 50px; } </style> <script> var value = ""; let flag = true; function addRs(num) { var rsInput = document.getElementById('rsInput'); if (flag) { rsInput.value = num; flag = false; } else { rsInput.value = rsInput.value + num; } } function addOp(op) { var rsInput = document.getElementById('rsInput'); // if (rsInput.isEmpty()) { // // } value += rsInput.value + " " + op + " "; rsInput.value = ""; console.log(value); } function opResult() { var rsInput = document.getElementById('rsInput'); console.log(value + rsInput.value); document.getElementById("rsInput").value = eval(value + rsInput.value); } function changeSign() { var rsInput = document.getElementById('rsInput'); document.getElementById('rsInput').value = Number.parseFloat(document.getElementById('rsInput').value) * -1; } function addComa() { var rsInput = document.getElementById('rsInput'); if (!rsInput.value.includes('.')) {//콤마 적용 여부 체크 rsInput.value = rsInput.value + "."; } } function sct(oper) { var rsInput = document.getElementById('rsInput'); if (oper === "sin") { rsInput.value = Math.sin(rsInput.value * Math.PI / 180); } else if (oper === "cos") { rsInput.value = Math.cos(rsInput.value * Math.PI / 180); } else if (oper === "tan") { rsInput.value = Math.tan(rsInput.value * Math.PI / 180); } } function Allreset() { value = ""; flag = true; } </script> <body> <form> <input type="text" value="0" readonly id="rsInput"> <div> <button type="reset" class="upBtn" onclick="Allreset()">Clear</button> <button type="button" class="upBtn" onclick="opResult()">=</button> </div> <div> <input type="button" value="1" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="2" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="3" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="+" class="numBtn opBtn" onclick="addOp(this.value);"> <button type="button" value="**" class="numBtn " onclick="addOp(this.value);">x^y</button> <!-- <input type="button" value="x^y" onclick="addOp(this.value);" class="numBtn">--> </div> <div> <input type="button" value="4" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="5" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="6" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="-" class="numBtn opBtn" onclick="addOp(this.value);"> <input type="button" value="sin" onclick="sct(this.value);" class="numBtn"> </div> <div> <input type="button" value="7" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="8" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="9" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="*" class="numBtn opBtn" onclick="addOp(this.value);"> <input type="button" value="cos" onclick="sct(this.value);" class="numBtn"> </div> <div> <input type="button" value="0" onclick="addRs(this.value);" class="numBtn"> <input type="button" value="+/-" onclick="changeSign();" class="numBtn"> <input type="button" value="." onclick="addComa()" class="numBtn"> <input type="button" value="/" class="numBtn opBtn" onclick="addOp(this.value);"> <input type="button" value="tan" onclick="sct(this.value);" class="numBtn"> </div> </form> </body> </html>
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.