Làm cách nào để lấy đầu vào từ bàn phím cho máy tính trong JavaScript?

Hãy tạo một Máy tính đơn giản, nhưng là một Máy tính hiện đại để thực hiện một số phép tính đại số đơn giản bằng HTML5, CSS và JavaScript

Máy tính trông như thế này -

Máy tính JavaScript đơn giản

Một máy tính đơn giản được sử dụng để thực hiện các phép tính toán học đơn giản như cộng, trừ, nhân và chia

Hãy bắt đầu tạo máy tính đơn giản của chúng tôi. chúng tôi sẽ sử dụng

1. HTML (chỉ mục. html) - Để tạo cấu trúc của máy tính
2. CSS (kiểu. css) - Để tạo kiểu cho máy tính
3. JavaScript (tập lệnh. js) - Để tạo logic của máy tính

Chúng tôi sẽ bắt đầu xây dựng máy tính của mình từng bước. Đầu tiên, cấu trúc của máy tính sẽ được tạo (sử dụng HTML), sau đó chúng tôi sẽ tạo kiểu cho nó (sử dụng CSS) và cuối cùng, chúng tôi sẽ tạo logic của máy tính (sử dụng JavaScript)

1. HTML - Tạo cấu trúc của máy tính

Khi bạn tạo cấu trúc của bất kỳ thứ gì trong HTML, cấu trúc đó không nhất thiết phải hoàn hảo trong lần thử đầu tiên. Bạn luôn có thể sửa đổi cấu trúc sau. Vì vậy, hãy bắt đầu tạo cấu trúc của máy tính của chúng tôi

Để bắt đầu, trước tiên hãy tạo một vùng chứa (a có một vùng chứa lớp) và bên trong nó tạo một phần tử div khác bằng máy tính lớp. Phần tử div này sẽ là vùng chứa máy tính của chúng ta

Bây giờ, bên trong hộp chứa máy tính, hãy tạo 2 phần tử div, một phần tử để hiển thị kết quả và một phần tử khác để hiển thị đầu vào

Phần tử đầu ra sẽ chứa thêm 2 phần tử trước. Cái đầu tiên được gọi là đầu ra trên, hiển thị biểu thức và cái thứ hai được gọi là đầu ra dưới, hiển thị kết quả

  

  
0

Phần tử đầu vào sẽ chứa tất cả các loại nút đầu vào mà chúng ta có thể có như, số, toán tử, xóa, dấu ngoặc, v.v. Ngoài ra, hãy đính kèm sự kiện onclick vào tất cả các nút này bằng chức năng javascript

  AC
  0
  
  +
  1
  2
  3
  -
  4
  5
  6
  ×
  7
  8
  9
  ÷
  .
  (
  )
  =

Trong đoạn mã trên, bạn có thể thấy các nút theo thứ tự nhất định vì chúng tôi muốn các nút của mình ở những vị trí cụ thể. Với các lệnh khác nhau, chúng ta có thể tạo các bố cục khác nhau của máy tính

Cuối cùng, kết nối tệp CSS và Javascript với tệp HTML. Ngoài ra, hãy thêm các biểu tượng phông chữ tuyệt vời vào tệp HTML

Đây là mã HTML hoàn chỉnh của máy tính. Lưu dưới dạng index. tệp html .

Mã HTML hoàn chỉnh

  
  
  
  
  
  



  

    

      

        

        
0
      
      

        AC
        0
        
        +
        1
        2
        3
        -
        4
        5
        6
        ×
        7
        8
        9
        ÷
        .
        (
        )
        =
      
    
  

  

Đây là cách nó trông

2. CSS - Tạo kiểu cho máy tính

Để tạo kiểu cho máy tính, bạn cần tạo một tệp CSS. Trong tệp CSS, nhắm mục tiêu các phần tử bằng bộ chọn CSS và thêm kiểu cho chúng

Đối với hướng và luồng nút, bạn có thể sử dụng CSS flexbox

Đây là mã CSS hoàn chỉnh của máy tính. Lưu dưới dạng kiểu. tệp css .

Mã CSS hoàn chỉnh

/* Calculator CSS */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

body {
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #4e4e4e;
}

.calculator {
  background: #dd6f6f;
  border-radius: 5px;
  padding: 5px;
  width: 300px;
  min-width: 300px;
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4), 
                    4px 4px 10px rgba(0, 0, 0, 0.7);
}

.output {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  background: #ffffff;
  min-height: 50px;
  padding: 5px;
  margin: 0 1px 10px;
  border-radius: 0.25rem;
  box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.output pre {
  text-align: right;
  font-size: 25px;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  width: 288px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.output pre::-webkit-scrollbar {
  display: none;
}

.output #upper {
  color: #424242;
  font-size: 18px;
}

.input {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.input button {
  width: calc(25% - 24px);
  height: 50px;
  margin: 8px 12px;
  border-radius: 50%;
  background-color: #c05d5d;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                    1px 1px 5px rgba(94, 31, 31, 0.7);
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  border: none;
}

.input button:hover {
  background-color: #b35555;
}

.input button:active {
  box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),
              inset -1px -1px 2px rgba(255, 255, 255, 0.3);
  color: #642929;
}

Chúng tôi đã hoàn thành thiết kế của máy tính. Bây giờ, chúng ta cần tạo mã JavaScript để máy tính hoạt động

3. Mã máy tính Javascript

Bây giờ chúng ta hãy viết mã javascript cho máy tính

I. Lựa chọn các yếu tố

Trong phần HTML, bạn có thể thấy có 2 phần tử đầu ra. Chọn cả hai bằng phương thức querySelector

// Select the output elements
// upper output is for showing the expression
let outputUpper = document.querySelector('#upper');
// lower output is for showing the result
let outputLower = document.querySelector('#lower');

'outputLower' là nơi biểu thức do người dùng đưa ra và đầu ra của kết quả sẽ được hiển thị.

'outputUpper' là nơi biểu thức do người dùng cung cấp sẽ được hiển thị ở kích thước nhỏ ngay phía trên kết quả để người dùng có thể nhìn thấy cả biểu thức và kết quả của họ tại .

II. Bây giờ hãy tạo một hàm để nhập các số

// function to get number input
function pressNum(e) {
  if (outputLower.innerHTML === '0') {
    outputLower.innerHTML = e.innerHTML;
  } else {
    outputLower.innerHTML += e.innerHTML;
  }
}

Hàm trên sẽ được gọi khi nhấn bất kỳ nút số nào. Nó sẽ kiểm tra xem outputLower (biểu thức) có bằng 0 hay không. Nếu là 0, thì nó sẽ thay thế số 0 bằng số được nhấn. Nếu nó không phải là 0, thì nó sẽ thêm số được nhấn vào đầu raLower

Chức năng lấy số được nhấn bằng cách sử dụng từ khóa này

III. Bây giờ hãy tạo một hàm để nhập các toán tử

Hàm trên sẽ được gọi khi nhấn bất kỳ nút điều hành nào. Nó sẽ kiểm tra xem toán tử cuối cùng trong biểu thức là +, -, × hay ÷. Nếu là +, -, × hoặc ÷, thì nó sẽ thay thế toán tử cuối cùng bằng toán tử được nhấn. Nếu không phải là +, -, × hoặc ÷ thì nó sẽ thêm toán tử được nhấn vào đầu raLower

Chúng tôi đang kiểm tra và thay thế toán tử cuối cùng vì nếu ai đó nhấn + toán tử nhiều lần thì nó sẽ trở thành ++ hoặc +++, đây không phải là toán tử hợp lệ. Hoặc có thể có trường hợp +*, +/+, v.v. Vì vậy, chúng tôi thay thế toán tử cuối cùng bằng toán tử mới được nhấn

IV. Bây giờ hãy tạo một chức năng để xóa máy tính

Chúng tôi có 2 nút để xóa máy tính. Một là nút xóa và nút kia là nút xóa tất cả

// function to clear the calculator
// clear all
function pressAllClear() {
  outputUpper.innerHTML = '';
  outputLower.innerHTML = '0';
}

// clear one
function pressClear() {
  outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
}

Để xóa một số, chúng tôi sẽ sử dụng 'outputLower. bên trongHTML. phương thức slice(0, -1)' . Điều này sẽ xóa số cuối cùng khỏi biểu thức. Để xóa tất cả các số, chúng tôi sẽ sử dụng 'outputLower. phương thức innerHTML = '0';' . Điều này sẽ thay thế biểu thức bằng 0.

V. Tạo chức năng viết dấu chấm và dấu ngoặc

VI. Bây giờ hãy tạo hàm để tính kết quả

Hàm trên sẽ được gọi khi nhấn nút bằng (=). Nó sẽ tính toán kết quả của biểu thức và hiển thị nó trong đầu raLower .

Chúng tôi đang sử dụng phương pháp eval() để tính toán kết quả.

Ở đây, chúng tôi đang thực hiện biểu thức trong khối thử và bắt. Nếu có bất kỳ lỗi nào trong biểu thức, thì nó sẽ hiển thị lỗi

Chúng tôi cũng đang kiểm tra xem kết quả có phải là số thập phân hay không. Nếu là số thập phân thì sẽ hiển thị với 4 chữ số thập phân

Cuối cùng, kết quả được hiển thị trong outputLower và biểu thức tương ứng được hiển thị trong outputUpper . .

VII. Bây giờ hãy tạo chức năng để xóa biểu thức và tất cả màn hình rõ ràng

Để xóa một số, chúng tôi sẽ sử dụng 'outputLower. bên trongHTML. phương thức slice(0, -1)' . Điều này sẽ xóa số cuối cùng khỏi biểu thức. Để xóa tất cả các số, chúng tôi sẽ sử dụng 'outputLower. phương thức innerHTML = '0';' . Điều này sẽ thay thế biểu thức bằng 0.

VIII. Bây giờ thêm trình xử lý sự kiện cho các nút bàn phím

Cuối cùng, thêm trình xử lý sự kiện cho các nút trên bàn phím để khi nhấn bất kỳ nút nào, nút này sẽ gọi hàm tương ứng và người dùng có thể tự chạy máy tính từ bàn phím

Trong đoạn mã trên, bạn có thể thấy chúng tôi đang sử dụng vị trí nút để lấy nút. Chúng tôi đang sử dụng 'tài liệu. querySelector('nút. nth-child(2)')' để lấy nút có vị trí 2. Điều này sẽ nhận được nút có số 0. và như thế.

báo cáo quảng cáo này

Chương trình máy tính JavaScript hoàn chỉnh

Đây là mã hoàn chỉnh cho một máy tính đơn giản

Thí dụ

▶ Dùng thử

Phần kết luận

Trong hướng dẫn đầy đủ về máy tính JavaScript này, bạn đã học cách tạo một máy tính đơn giản tuyệt vời. Bạn có thể sử dụng nó để tính bất kỳ biểu thức toán học nào. Sự kiện bàn phím cũng được gắn vào máy tính. Bạn cũng có thể sử dụng máy tính trên trang web hoặc ứng dụng dành cho thiết bị di động của mình

Làm cách nào để cung cấp đầu vào từ bàn phím trong JavaScript?

Làm cách nào để tạo máy tính trong JavaScript bằng chức năng?

Làm cách nào để sử dụng đầu vào trong JavaScript?

Làm cách nào để tạo máy tính đơn giản trong HTML bằng JavaScript?

Các bước để tạo một máy tính đơn giản bằng HTML và JavaScript .

At first Insert a

element within tag..

Create a table using …. .. .

Insert two types of Input text and button within table data of table row using

…. .. . Chỉ định sự kiện OnClick cho tất cả các nút có số và toán tử số học Đọc tiếp

programming javascript

Reply 6 0 Chia sẻ