새소식

인기 검색어

개인공부/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

당신이 좋아할만한 콘텐츠

댓글 0

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

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

SHARE

DARK

MENU

티스토리툴바