Viết chương trình mô phỏng các phép toán cộng trừ nhân chia của máy tính bỏ túi

Cấu trúc của máy tính được tạo bằng thẻ . Thẻchứa năm hàng đại diện cho năm hàng của máy tính. Mỗi hàng được tạo bằng  thẻ . Mỗi thẻ chứa các thẻ[Table Data – Dữ liệu Bảng] giữ màn hình hiển thị và các nút của máy tính.

Mã CSS

Mở tệp styles.css và dán mã sau:

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];

.calculator {

padding: 10px;

border-radius: 1em;

height: 380px;

Simple Calculator using HTML, CSS and JavaScript0

Simple Calculator using HTML, CSS and JavaScript1

Simple Calculator using HTML, CSS and JavaScript2

Simple Calculator using HTML, CSS and JavaScript3

Simple Calculator using HTML, CSS and JavaScript4

Simple Calculator using HTML, CSS and JavaScript5

Simple Calculator using HTML, CSS and JavaScript6

Simple Calculator using HTML, CSS and JavaScript7

Simple Calculator using HTML, CSS and JavaScript8

Simple Calculator using HTML, CSS and JavaScript9

0

1

2

Simple Calculator using HTML, CSS and JavaScript4

4

Simple Calculator using HTML, CSS and JavaScript6

6

7

Simple Calculator using HTML, CSS and JavaScript8

1

0

Simple Calculator using HTML, CSS and JavaScript4

Simple Calculator using HTML, CSS and JavaScript4

CSS trên được sử dụng để tạo kiểu cho máy tính. Selector [bộ chọn] .class  được sử dụng để chọn các phần tử có thuộc tính lớp cụ thể. Các class selector .calculator , .display-box và .button được sử dụng để định kiểu cấu trúc bảng, màn hình hiển thị và các nút tương ứng của máy tính. @import được sử dụng để nhập họ phông chữ Orbitron từ phông chữ Google.

Mã JavaScript

Mở tệp script.js và dán mã sau:

0

1

2

Simple Calculator using HTML, CSS and JavaScript4

4

5

6

Simple Calculator using HTML, CSS and JavaScript4

8

9

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];0

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];1

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];2

Simple Calculator using HTML, CSS and JavaScript4

Hiểu mã JavaScript

Các hàm clearScreen[], display[], và calculate[] được sử dụng để thêm chức năng vào Máy tính.

Xóa giá trị

Hàm clearScreen[] truy cập DOM bằng cách sử dụng id của kết quả và xóa giá trị của nó bằng cách gán cho nó một chuỗi trống.

1

2

Simple Calculator using HTML, CSS and JavaScript4

Hiển thị giá trị

Hàm display[] truy cập DOM bằng cách sử dụng id của kết quả và thêm giá trị của nút được nhấp vào kết quả.

5

6

Simple Calculator using HTML, CSS and JavaScript4

Đánh giá Biểu thức [expression]

Hàm calculate[] truy cập DOM bằng cách sử dụng id của kết quả và đánh giá biểu thức bằng cách sử dụng hàm eval[]. Giá trị đã đánh giá của biểu thức lại được gán cho kết quả.

Lưu ý: Hàm eval [] được sử dụng trong JavaScript để đánh giá biểu thức được truyền cho nó dưới dạng tham số. Nó trả về kết quả được đánh giá của biểu thức toán học.

9

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];0

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];1

@import url['//fonts.googleapis.com/css2?family=Orbitron&display=swap'];2

Simple Calculator using HTML, CSS and JavaScript4

Nếu bạn muốn xem toàn bộ mã nguồn được sử dụng trong bài viết này, đây là kho lưu trữ GitHub. Ngoài ra, nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn cũng có thể xem qua GitHub.

Phát triển các dự án lập trình thú vị

Bạn có thể nâng cao kỹ năng kỹ thuật của mình lên cấp độ tiếp theo bằng cách phát triển các dự án. Cho dù bạn là người mới bắt đầu hay bạn đang bắt đầu quay lại với việc viết mã sau một thời gian nghỉ ngơi, việc phát triển các dự án có thể tăng sự tự tin của bạn lên rất nhiều.