1. Trang chủ
3. Blog
5. Tạo máy tính cầm tay bằng JavaScript

Tạo máy tính cầm tay bằng JavaScript

Hòa Trần Blogger

tháng 9 01, 2020

Blog

Mục lục

Xây dựng ứng dụng máy tính đơn giản bằng Javascript, Tạo máy tính cầm tay bằng JavaScript. Bài viết này sẽ hướng dẫn chi tiết cách xây dựng một ứng dụng máy tính đơn giản bằng JavaScript

Toàn bộ code Tạo máy tính cầm tay bằng JavaScript bên dưới 

Copy

<style>
  /*<![CDATA[*/
#cal-container{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-family:Arial,sans-serif}
.calculator{width:300px;padding:10px;border:1px solid #ccc;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
#display{width:100%;margin-bottom:10px;padding:5px;font-size:18px}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:5px}
button{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:5px;background-color:#f4f4f4;cursor:pointer}
button:active{background-color:#ddd}
  /*]]>*/
</style>
<div id='cal-container'>
  <div class="calculator">
    <input type="text" id="display" readonly = 'true'/>
    <div class="buttons">
      <button onclick="clearDisplay()">C</button>
      <button onclick="appendToDisplay('/')">/</button>
      <button onclick="appendToDisplay('*')">x</button>
      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button onclick="appendToDisplay('+')">+</button>
      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button onclick="calculate()">=</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
    </div>
  </div>
</div>
<script>
  //<![CDATA[
  let display = document.getElementById('display');
  let operators = ['+', '-', '*', '/'];
  let lastInputIsOperator = false;

  function appendToDisplay(value) {
    // Kiểm tra nếu giá trị là toán tử hoặc dấu chấm và nếu người dùng đã nhập một toán tử trước đó
    if ((operators.includes(value) || value === '.') && lastInputIsOperator) {
      // Không thêm gì cả
      return;
    }
    // Nếu giá trị không phải là toán tử hoặc dấu chấm, đặt lại biến lastInputIsOperator
    if (!operators.includes(value) && value !== '.') {
      lastInputIsOperator = false;
    }
    display.value += value;
    // Nếu giá trị là toán tử hoặc dấu chấm, đặt lastInputIsOperator thành true
    if (operators.includes(value) || value === '.') {
      lastInputIsOperator = true;
    }
  }

  function clearDisplay() {
    display.value = '';
    lastInputIsOperator = false;
  }

  function calculate() {
    try {
      display.value = eval(display.value);
    } catch (error) {
      display.value = 'Error';
    }
  }
  //]]>
</script>

Chia sẻ:

Đã sao chép link!

Bài viết mới