Làm cách nào để tạo một máy tính trong HTML?

Question

Trong hướng dẫn này, chúng tôi sẽ tạo một máy tính hoạt động hoàn toàn chỉ bằng HTML, CSS và vanilla Javascript. Bạn sẽ tìm hiểu về xử lý sự kiện và thao tác DOM trong suốt dự án. Theo tôi đây là một dự án mới bắt đầu thực sự tốt cho những ai muốn trở thành nhà phát triển web

Nội dung chính Show

Video hướng dẫn
Nơi bạn có thể học hỏi thêm từ tôi?
Làm cách nào để tạo Máy tính trong HTML bằng JavaScript?
Làm cách nào để tạo Máy tính bằng CSS?
Tính toán có thể thực hiện được trong HTML không?

Video hướng dẫn

Thay vào đó, nếu bạn muốn xem video chi tiết từng bước, bạn có thể xem video tôi đã thực hiện về dự án này trên Kênh Youtube của tôi

HTML

Html sẽ khá đơn giản cho dự án này. Chúng ta sẽ bắt đầu với một bản soạn sẵn HTML5 tiêu chuẩn. Ở dưới cùng của cơ thể của chúng tôi, tôi đã bao gồm tập lệnh

  class="buttons">
     class="button">C


 class="button">/
 class="button">*
 class="button">←
 class="button">7
 class="button">8
 class="button">9
 class="button">-
 class="button">4
 class="button">5
 class="button">6
 class="button">+
 class="button">1
 class="button">2
 class="button">3
 class="button">.
 class="button">(
 class="button">0
 class="button">)
 id="equal" class="button">=

2 mà chúng tôi sẽ tạo sau. Điều này cần phải ở dưới cùng, bởi vì theo cách này, khi javascript của chúng tôi chạy, các phần tử html cần thiết cho máy tính sẽ nằm trong DOM
Trong phần thân, chúng ta có một

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

3 và bên trong đó là một div có lớp

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

4. Chúng tôi sẽ sử dụng các trình bao bọc này để định vị máy tính của chúng tôi trên trang. Bên trong vùng chứa của chúng tôi, chúng tôi có một div trống với id là

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

5 và đây sẽ là màn hình của máy tính của chúng tôi. Nó trống, bởi vì chúng tôi sẽ sửa đổi nội dung của nó từ Javascript. Sau đó, chúng tôi có một div với lớp

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

6 sẽ đại diện cho bàn phím của máy tính


    
         class="container">
             id="display">
             class="buttons">

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hộp chứa

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

6 sẽ chứa tất cả các nút. Mỗi nút sẽ là một div với lớp là

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

8. Điều này sẽ làm cho việc tạo kiểu dễ dàng và cũng sẽ giúp chúng tôi thu thập thông tin đầu vào của người dùng. Ở đây chúng tôi có một div cho mọi nút mà chúng tôi muốn trên bàn phím của mình. Bạn có thể nhận thấy rằng chúng tôi có một nhãn trông kỳ lạ giữa các nút.

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

9. Đây là một thực thể HTML và nó hiển thị một mũi tên quay lại (←) và chúng tôi sẽ sử dụng nó làm một khoảng lùi. Ngoài ra, xin lưu ý rằng đối với nút dấu bằng, chúng tôi có một id riêng

 rel="stylesheet" href="style.css">

0. Chúng tôi sẽ sử dụng Id này để phân biệt nút đặc biệt này và đánh giá biểu thức được cung cấp cho máy tính

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và đây là tất cả đánh dấu HTML mà chúng ta cần cho dự án này, hãy bắt đầu với CSS

Đừng quên liên kết CSS Stylehead trong phần đầu của tệp HTML

 rel="stylesheet" href="style.css">

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

CSS

Hãy tạo một tệp

 rel="stylesheet" href="style.css">

1
Chúng tôi đặt chiều rộng cho vùng chứa và căn giữa nó bằng cách sử dụng lề (cũng cung cấp cho nó lề trên khá tốt là 10vh) và áp dụng một bóng hộp nhỏ

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đối với màn hình, chúng tôi đặt chiều cao cố định và để căn giữa văn bản theo chiều dọc, chúng tôi cần đặt chiều cao dòng thành cùng một lượng. Văn bản phải được căn phải, vì đây là cách hoạt động của hầu hết các màn hình máy tính. Đồng thời đặt kích thước phông chữ và cung cấp một lượng đệm phù hợp

#display {
    text-align: right;
    height: 70px;
    line-height: 70px;
    padding: 16px 8px;
    font-size: 25px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để định vị các nút, chúng tôi sử dụng lưới CSS. Bằng cách đặt 4 x 1fr trong-______9_______2, chúng ta sẽ có 4 nút có kích thước bằng nhau ở mỗi hàng. Chúng tôi chỉ đặt đường viền dưới cùng và bên trái, vì vậy chúng tôi sẽ không nhận được đường viền kép. Chúng tôi sẽ đặt hai bên còn lại trong quy tắc CSS tiếp theo

.buttons {
    display: grid;
    border-bottom: 1px solid #999;
    border-left: 1px solid#999;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Áp dụng hai cạnh còn thiếu của đường viền cho mọi nút

.buttons > div {
    border-top: 1px solid #999;
    border-right: 1px solid#999;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đối với nút, chúng tôi sẽ đặt đường viền, kích thước phông chữ và chiều cao dòng 100px để căn giữa theo chiều dọc và đặt

 rel="stylesheet" href="style.css">

3 để căn giữa nhãn nút theo chiều ngang. Để có trải nghiệm người dùng tốt hơn, hãy đặt con trỏ thành con trỏ, để người dùng biết rằng đây là phần tử có thể nhấp

.button {
    border: 0.5px solid #999;
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi muốn nút bằng nổi bật, vì vậy, chúng tôi sẽ đặt màu nền xanh lam và văn bản màu trắng cho nút đó. Ngoài ra để có hiệu ứng di chuột đẹp mắt, chúng ta sẽ đặt màu nền tối hơn và màu văn bản màu trắng khi di chuột. Để làm cho quá trình chuyển đổi trơn tru được thiết lập.

 rel="stylesheet" href="style.css">

4

#equal {
    background-color: rgb(85, 85, 255);
    color: white;
}

.button:hover {
    background-color: #323330;
    color: white;
    transition: 0.5s ease-in-out;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Javascript

Đây sẽ là trung tâm của ứng dụng của chúng tôi. Hãy tạo tệp

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

2. Điều đầu tiên chúng ta cần làm là lưu một tham chiếu đến phần tử dom hiển thị của chúng ta. Chúng ta có thể dễ dàng làm điều đó vì nó có id là

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

5

let display = document.getElementById('display');

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo chúng ta phải lấy tài liệu tham khảo cho các nút. Chúng tôi sẽ lưu trữ các tham chiếu nút trong một mảng. Để thu thập các nút, chúng ta có thể chọn chúng bằng cách sử dụng

 rel="stylesheet" href="style.css">

7, nhưng chức năng này trả về một NodeCollection thay vì một mảng nên chúng ta phải chuyển đổi nó thành một mảng bằng cách sử dụng

 rel="stylesheet" href="style.css">

8

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước tiếp theo và cuối cùng chúng ta phải thực hiện là thêm trình xử lý sự kiện vào các nút và xây dựng các chức năng. Để thêm trình xử lý sự kiện cho các nút, chúng tôi sẽ ánh xạ qua mảng nút và thêm trình xử lý sự kiện nhấp cho từng nút. (Một giải pháp nâng cao sẽ là chỉ thêm trình lắng nghe sự kiện vào vùng chứa

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

6 và sử dụng bong bóng sự kiện nhưng đây là giải pháp thân thiện với người mới bắt đầu hơn. )

Để xác định những gì chúng tôi nên làm, chúng tôi sẽ sử dụng

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

0, điều này sẽ chỉ trả lại nhãn của nút đã được nhấp

Trong trường hợp đầu tiên, khi người dùng nhấn nút "C", chúng tôi muốn xóa màn hình. Để làm điều đó, chúng tôi có thể truy cập tham chiếu hiển thị của mình và đặt

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

1 thành một chuỗi trống. Đừng quên thêm

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

2 vào cuối, vì nó cần thiết để ngăn chặn việc thực thi mã được xác định trong các khối

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

3 khác

Đối với nút bằng, chúng tôi sẽ sử dụng hàm

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

4 tích hợp trong javascript. Chúng ta cần cung cấp nội dung của màn hình cho eval và nó sẽ đánh giá và trả về kết quả, vì vậy chúng ta nên đặt kết quả của cuộc gọi eval thành văn bản bên trong của màn hình. Chúng ta cần bọc cái này thành một khối try catch để xử lý lỗi. Lỗi có thể xảy ra khi chúng tôi có các biểu thức toán học sai về mặt cú pháp, ví dụ:

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

5, trong những trường hợp này, chúng tôi sẽ đặt văn bản bên trong của màn hình thành 'Lỗi'

⚠️ Bạn không nên sử dụng eval trong các ứng dụng hướng tới người dùng, vì nó có thể bị lạm dụng và có thể chạy mã bên ngoài với nó. Nếu bạn muốn thay thế eval, tôi khuyên bạn nên sử dụng Math. thư viện js

Nếu người dùng nhấn vào mũi tên quay lại, chúng tôi cần xóa ký tự cuối cùng khỏi nội dung của màn hình. Để làm điều đó, chúng ta sẽ sử dụng Chuỗi. slice(), nhưng chúng tôi chỉ muốn làm điều đó nếu màn hình có bất kỳ giá trị nào

Trong trường hợp mặc định, vì vậy, bất cứ khi nào người dùng không nhấn các ký hiệu đặc biệt này, chúng tôi chỉ muốn thêm văn bản bên trong của nút được nhấp vào văn bản bên trong của màn hình. Chúng ta có thể sử dụng toán tử

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

6 để làm điều đó

  class="buttons">
     class="button">C
     class="button">/
     class="button">*
     class="button">←
     class="button">7
     class="button">8
     class="button">9
     class="button">-
     class="button">4
     class="button">5
     class="button">6
     class="button">+
     class="button">1
     class="button">2
     class="button">3
     class="button">.
     class="button">(
     class="button">0
     class="button">)
     id="equal" class="button">=

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Toàn bộ dự án có sẵn trên GitHub
Và đó là bạn có một máy tính làm việc

Cảm ơn vì đã đọc

Nơi bạn có thể học hỏi thêm từ tôi?

Tôi tạo nội dung giáo dục về phát triển web trên một số nền tảng, vui lòng 👀 kiểm tra chúng

Tôi cũng tạo một bản tin nơi tôi chia sẻ nội dung giáo dục của tuần hoặc 2 tuần mà tôi đã tạo. Không có bò💩 chỉ có nội dung giáo dục

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

Hướng dẫn tạo một máy tính đơn giản .

Mã HTML ban đầu để bao gồm. js và. tập tin css. .

Input the Digits And Operators. This step creates buttons for digits from 0 to 9 and operators like +,-,*,/, and = .. .

Thêm kiểu dáng trong. tập tin css. Để làm đẹp những gì bạn nhìn thấy trên màn hình, kiểu dáng là rất quan trọng

Làm cách nào để tạo Máy tính bằng CSS?

Tạo máy tính bằng HTML, CSS và JavaScript .

Bước 1. Tạo cấu trúc cơ bản của máy tính. <. .

Bước 2. Tạo hộp kết quả để xem phép tính. .

Bước 3. Tạo các nút trong máy tính. .

Bước 4. Kích hoạt các nút trên máy tính. .

Bước 5. Thêm mã JavaScript sau để tính toán đầu vào

Tính toán có thể thực hiện được trong HTML không?

Về mặt logic, Có. Có thể thực hiện các phép tính đơn giản mà không cần sử dụng JS. tuy nhiên có rất nhiều cảnh báo về điều này. Cách tốt nhất để giải quyết vấn đề không có js là sử dụng ngôn ngữ phía máy chủ như PHP hoặc tương tự để thực hiện số học như @ACV đã nói đúng

programming html

Làm cách nào để tạo một máy tính trong HTML?

Video hướng dẫn

HTML

CSS

Javascript

Nơi bạn có thể học hỏi thêm từ tôi?

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

Làm cách nào để tạo Máy tính bằng CSS?

Tính toán có thể thực hiện được trong HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội