Chào mừng đến với Tricker Channel! Hôm nay, chúng ta sẽ cùng nhau khám phá cách tạo một chiếc máy tính cầm tay sử dụng ngôn ngữ lập trình JavaScript. Đây là một dự án thú vị và giúp bạn cải thiện kỹ năng lập trình của mình. Hãy bắt đầu ngay trong nội dung bài viết hôm nay.

Mục lục bài viết

Tại Sao Chúng Ta Nên Tạo Máy Tính Cầm Tay?

Trước hết, bạn có thể tự hỏi tại sao chúng ta nên tạo một máy tính cầm tay bằng JavaScript. Đơn giản, đây là cơ hội tuyệt vời để áp dụng những kiến thức đã học áp dụng vào thực hành thực tế. Bạn sẽ có cơ hội hiểu rõ hơn về cách JavaScript hoạt động và làm thế nào nó có thể được sử dụng để xây dựng ứng dụng thực tế.

Bài viết liên quan:

Chuẩn Bị Môi Trường Làm Việc

Trước khi bắt đầu, chắc chắn rằng bạn đã cài đặt môi trường làm việc cần thiết như Node.js và trình duyệt web. Điều này sẽ giúp bạn thực hiện và kiểm thử dự án của mình một cách dễ dàng.

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

<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="appendToDisplay('+')">+</button>
      <button onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('*')">x</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="clearDisplay()">C</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('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="calculate()">=</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>

Demo máy tính cầm tay

Code máy tính bằng Javascript Và Html

<!DOCTYPE html>
<html lang="vi">
<head>
  <title>Sharecs.net</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="caculate.css">
</head>
<body>
<div class="container">
        <div class="calculator">
          
            <input type="text" placeholder="0" id="output-screen">


            <button onclick="Clear('')">Cl</button>
            <button onclick="del('')">DEL</button>
            <button onclick="display('%')">%</button>
            <button onclick="display('/')">/</button>
            <button onclick="display('7')">7</button>
            <button onclick="display('8')">8</button>
            <button onclick="display('9')">9</button>
            <button onclick="display('*')">*</button>
            <button onclick="display('4')">4</button>
            <button onclick="display('5')">5</button>
            <button onclick="display('6')">6</button>
            <button onclick="display('-')">-</button>
            <button onclick="display('1')">1</button>
            <button onclick="display('2')">2</button>
            <button onclick="display('3')">3</button>
            <button onclick="display('+')">+</button>
            <button onclick="display('0')">0</button>
            <button onclick="display('.')">.</button>
            <button onclick="calculate('')" class="equal">=</button>
 
        </div>
    </div>

    <script src="calcu.js"></script>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:#ecf0f3;
    font-family: sans-serif;
    outline: none;
}
.container{
    height: 100vh;
    display: flex;
     justify-content: center;
    align-items: center; 
}
.calculator{
    background-color: #ecf0f3;
    padding: 15px;
    border-radius: 30px;
    box-shadow:inset 5px 5px 12px #ffffff,
                     5px 5px 12px rgba(0,0,0,.16);
     display: grid;
    grid-template-columns: repeat(4,70px); 
}
input{
     grid-column: span 4;
     height: 70px; 
     width: 260px;
     background-color: #ecf0f3;
     box-shadow: inset -5px -5px 12px #ffffff,
                 inset 5px 5px  12px rgba(0,0,0,.16);
    border: none;
    border-radius: 30px;
    color: rgb(70,70,70);
    font-size: 27px;
    font-weight: 700;
    text-align: end;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 20px;

}
button{
    height: 48px;
    width: 48px;
    background-color: #ecf0f3;
    box-shadow: -5px -5px 12px #ffffff,
    5px 5px 12px rgba(0,0,0,.16);
    border-radius: 50%;
    border: none;
    margin: 10px;
    font-size: 18px;
}
button:hover{
    background-color: rgb(241, 227, 227);
    cursor: pointer;
    transition: 0.5s;
}
.equal{
    width: 115px;
    border-radius: 40px;
    animation: col 3s infinite;
}


@keyframes col{
    0%{
        color: red;
    }
    33%{
        color: green;
    }
    100%{
        color: blue;
    }
}

let outputScreen = document.getElementById("output-screen");


// for output
function display(num){
    outputScreen.value += num;
}

// for operator

function calculate(){
    try{
        outputScreen.value = eval(outputScreen.value);
    }
    catch(err){
        alert("Invalid")
    }

}

// for clear and dellete
function Clear(){
    outputScreen.value = "";
}

function del(){
    outputScreen.value =outputScreen.value.slice(0,-1);
}

Demo

Kết Luận

Tạo một máy tính cầm tay bằng JavaScript không chỉ là một dự án thú vị mà còn là cơ hội tốt để rèn luyện kỹ năng lập trình của bạn. Hy vọng rằng bài viết này từ Tricker Channel sẽ giúp bạn mang lại những trải nghiệm tích cực. Hãy bắt đầu ngay và đừng quên chia sẻ bài viết này đến với bạn bè của bạn!

Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...

Tricker Channel

Hướng Dẫn Tạo Máy Tính Cầm Tay Bằng JavaScript

Tại Sao Chúng Ta Nên Tạo Máy Tính Cầm Tay?

Chuẩn Bị Môi Trường Làm Việc

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

Code máy tính bằng Javascript Và Html

Kết Luận

Đăng nhận xét

★ Share 999+ Link Contact Support Facebook | Mới Nhất 2022 ★

Hướng dẫn đăng kí SSL cho website

Hướng Dẫn Unlock 956 Về Bằng Phút | Cân Spam Mới Nhất 2024

Tricker Channel