Mã máy tính đơn giản trong html và javascript

điều kiện tiên quyết

Chúng ta đang tạo ra cái gì?

Để xây dựng máy tính cơ bản, chúng tôi sẽ viết mã máy tính HTML và thêm CSS và JavaScript vào đó. Máy tính sẽ có khả năng thực hiện các chức năng cơ bản như cộng, trừ, nhân và chia

Mã máy tính trong HTML sẽ chứa hai phần

• Màn hình hiển thị - Để hiển thị kết quả
• Phím - Để thực hiện các chức năng được chỉ định của chúng như được thảo luận bên dưới

Các tính năng của Máy tính

Trong dự án này, bạn sẽ phát triển mã máy tính HTML từ đầu. Các tính năng hoặc chức năng của máy tính bao gồm

• Các phép tính số học cơ bản như cộng, trừ, chia và nhân
• phép toán thập phân
• Hiển thị 'ERROR' cho các biểu thức không hợp lệ
• Hiển thị 'Vô cực' khi một số được chia cho số không
• Xóa màn hình hiển thị bất cứ khi nào người dùng muốn, với sự trợ giúp của tính năng xóa màn hình

Các thành phần của Máy tính

Mã máy tính HTML chứa hai phần chính

• Màn hình hiển thị
• chìa khóa
  • Phím số (0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
  • Các phím toán tử (+, -, ×, ÷)
  • Khóa thập phân (. )
  • Nút Tính / Phím Bằng (=)
  • Nút xóa màn hình (AC)

Làm cách nào để tạo một máy tính với sự trợ giúp của HTML?

Bước 1 - Bản soạn sẵn và bao gồm các tệp

Ở bước đầu tiên, chúng tôi tạo một thư mục gốc 'Máy tính' chứa các tệp HTML, CSS và JavaScript. Đặt tên cho chỉ mục tệp HTML, CSS và JavaScript. html, phong cách. css và tập lệnh. js tương ứng

Ở trạng thái ban đầu, chúng tôi có một bản soạn sẵn HTML5 tiêu chuẩn. Tập lệnh tệp JavaScript. js được bao gồm bằng cách sử dụng

Bước 2 - Điều chỉnh các thùng chứa

Lớp bttns chứa tất cả các nút riêng lẻ có một lớp btn. Các div này chứa các phím của bàn phím, nghĩa là toán tử và chữ số

mục lục. html

	
AC
	
.
	
0
	
/
	
1




	
2
	
3
	
*
	
4
	
5
	
6
	
+
	
7
	
8
	
9
	
-

Bước 3 - Nút Bằng
Nút bằng báo hiệu chương trình thực hiện phép tính. Chúng tôi tạo một div riêng để bao gồm nó
mục lục. html

    
=




Mã HTML kết hợp
mục lục. html


    
        Calculator
    
    
        

          

            
0
            

              
AC
              
.
              
0
              
/
              
1
              
2
              
3
              
*
              
4
              
5
              
6
              
+
              
7
              
8
              
9




              
-
            

            

              
=
            

          

        

Tạo kiểu cho Máy tính

Bước 1 - Tạo kiểu cơ bản để đặt các mục vào vị trí

• theo phong cách. css, chúng tôi đặt chiều rộng cho vùng chứa
• Chúng tôi đặt chiều cao và chiều cao dòng bằng nhau để căn giữa văn bản theo chiều dọc. Sau đó, chúng tôi đặt kích thước phông chữ thành một lượng đệm vừa phải
• Để định vị các nút, chúng tôi sử dụng lưới CSS để chúng tôi có 4 nút có kích thước bằng nhau trong mỗi hàng
• Đối với nút, chúng tôi đặt đường viền và kích thước phông chữ. Chiều cao dòng định vị mục ở giữa theo chiều dọc và căn chỉnh văn bản. trung tâm đặt nó ở trung tâm theo chiều ngang

Phong cách. css

.container {
    max-width: 360px;
}
#result {
    height: 50px;
    line-height: 30px;
    padding: 4% 2%;
    font-size: 25px;
}
.bttns {
    display: grid;
    border: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bttns div {
    border-top: 1px solid #999;
}
.btn {
    border: .5px solid gray;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
}
đầu ra
Bước 2 - Giao diện người dùng tốt hơn
Để làm cho mã máy tính HTML hấp dẫn người dùng, chúng tôi thêm các thành phần kiểu dáng, ví dụ: bóng hộp cho màu nền của máy tính cho một số phím nhất định, căn chỉnh văn bản trong khu vực hiển thị và một số hiệu ứng di chuột. Để 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
Phong cách. css
.container {
    box-shadow: 0px 0px 22px 8px gray;
}
.btn {
    cursor: pointer;
}
#result {
    text-align: right;
}
#equal {
    background-color: dodgerblue;
    color: white;
    font-size: 30px;
}
#clear{
    background-color: tomato;
    color: white;
}
.btn:hover {
    background-color: lightgray;
}
#equal:hover{
    background-color: blue;
}
#clear:hover{
    background-color: red;
}
đầu ra
Mã CSS kết hợp
Phong cách. css
.container {
	max-width: 360px;
	box-shadow: 0px 0px 22px 8px gray;
}
#result {
    text-align: right;
    height: 50px;
    line-height: 30px;
    padding: 4% 2%;
    font-size: 25px;
    font-family: 'courier';
}
.bttns {
    display: grid;
    border: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bttns div {
    border-top: 1px solid #999;
}
.btn {
    border: .5px solid gray;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}
#equal {
    background-color: dodgerblue;
    color: white;
    font-size: 30px;
}
#clear{
    background-color: tomato;
    color: white;
}
.btn:hover {
    background-color: lightgray;
}
#equal:hover{
    background-color: blue;
}
#clear:hover{
    background-color: red;
}

Thêm chức năng

• trong kịch bản. js trước tiên, hãy lưu tham chiếu đến phần tử dom kết quả của bạn

let result = document.getElementById('result');
Tiếp theo, chúng tôi lưu trữ các tham chiếu nút trong một mảng. tài liệu chức năng. getElementsByClassName('btn') trả về một NodeCollection. Chúng tôi sử dụng Mảng. từ (tài liệu. getElementsByClassName('btn')) để chuyển cái này thành một mảng
script. js
let buttons = Array.from(document.getElementsByClassName('btn'));
Ở bước cuối cùng, chúng tôi 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. Đối với điều này, chúng tôi ánh xạ qua mảng nút và thêm trình xử lý sự kiện nhấp chuột cho mỗi
chúng tôi sử dụng điện tử. Mục tiêu. InternalText, để lấy nhãn của nút đã được nhấp và sau đó phân bổ các chức năng tương ứng
 

			
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 trong mã HTML?
			
Ví dụ về Máy tính sử dụng HTML.