🔥🔥 HOT! 🔥🔥 Template siêu VIP #500K

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

Zalo 0971539681 Tư vấn & Hỗ trợ
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 

<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>

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo