[JavaScript] 계산기 프로그램을 만들어 봤어요.

개시하다

코드가 아직 성숙하지 않은 것 같아요.
js 학습에서 계산기 프로그램을 만들었기 때문에 기록해야 합니다.

이미지 캡처

코드

html


<body>

    <p id="errormessage"></p>

    <div class="calculator">

    <table>

      <tr >
        <td colspan="4">
          <div class="head">
            <input id ="result" placeholder="0"/>
          </div>
        </td>
        </tr>

      <tr>
        <td colspan="2">
          <div class="col2">
            <button class="btn" onclick="update( '' ) ">clear</button>
          </div>
        </td>
        <td></td>
        <td>
          <div>
            <button onclick="btn('+')">+</button>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <button onclick="btn('1')">1</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('2')">2</button>
          </div>
        </td>
        <td>
          <div class="mr">
            <button onclick="btn('3')">3</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('-')">-</button>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <button onclick="btn('4')">4</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('5')">5</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('6')">6</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="calc2('*')">×</button>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <button onclick="btn('7')">7</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('8')">8</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('9')">9</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="calc2('/')">÷</button>
          </div>
        </td>
      </tr>

      <tr>
        <td colspan="2">
          <div class="col2">
            <button onclick="btn('0')">0</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('00')">00</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="calc()">=</button>
          </div>
        </td>
      </tr>

    </table>
  </div>

  </body>


// 初期値０で四則演算子が押されたら'calcbtn'にする
var state = 0;

// inputに表示、エラー文消去
function show(elem) {
  document.querySelector('input').value += elem;
  errormessage.innerHTML = '';
}

// var checkNum = new RegExp(/^[0-9]/);
// checkNum.test(inputV)


// 押されたボタンを表示
function btn(elem) {
  var inputV = document.querySelector('input').value;

    // 四則演算子ボタンが押された時
  if (elem === '+' || elem === '-' || elem === '*' || elem === '/') {

    //四則演算子ボタンが入力された時に連続で押せないようにする
    if (state === 'calcbtn') {
      var inputV = document.querySelector('input').value;
      inputV = inputV.slice(0, -1);

      document.querySelector('input').value = inputV;
      show(elem)

    } else {
      state = 'calcbtn';
      show(elem)
    }

  } else {
    state = 0;
    show(elem)
  }
};


// 最初に'*','/'が入力された時に弾く
function calc2 (elem) {
  var inputV = document.querySelector('input').value;
  if (inputV === '' || inputV === '+' || inputV === '-') {
    return;
  } else {
    btn(elem);
  }
};




// input を更新する
function update(elem) {
  document.querySelector('input').value = elem;
  errormessage.innerHTML = '';
}

// =ボタンが押された時計算する
var errormessage = document.getElementById('errormessage');
function calc() {
  var inputV = document.querySelector('input').value;
  try {
    var total = new Function('return ' + inputV);
    update( total().toString() );
  } catch {
    errormessage.innerHTML = '入力値が不正です。'
  }
}

끝맺다

훗날 학자의 참고가 되었으면 좋겠다!
지적할 점이 있다면 댓글로 잘 부탁드립니다!

Reference

이 문제에 관하여([JavaScript] 계산기 프로그램을 만들어 봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sho-17/items/24566e56f5a2f8b9a974

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다