Máy tính đơn giản sử dụng JavaScript w3schools
Máy tính HTML được sử dụng để thực hiện các phép toán cơ bản như Cộng, trừ, nhân và chia Show Bạn có thể tìm thấy bản xem trước trực tiếp bên dưới, hãy dùng thử Để thiết kế máy tính cơ bản, chúng tôi sẽ sử dụng HTML, CSS và JavaScript. HTML được sử dụng để thiết kế cấu trúc cơ bản của máy tính. Các kiểu CSS được sử dụng để áp dụng các kiểu trên máy tính và JavaScript được sử dụng để thêm chức năng tính toán Tiếp cận
Thí dụ 0________ 61 ________ 62 ________ 63 4 1 6 3 8 1____610 11 12 13________ 614 ________ 615 ________ 612 17 14 19 12 21 14 23____612 25 26 10 3 8 1____610 11 12 34________ 614 ________ 615 ________ 612 38 14 19 12 21 14 23____612 25 26 10 3 8 11 8 1____614 3 14 17 18 19 18 61 18 63 14 65 4 14 68 18 30 18 32 18 34 18 36 18 38 18 80 18 82 18 84 14 65 4 14 89 18 11 18 38 18 80 18 82 18 84 18 101 14 65 8 105 14 3 105 6 3 111 4 1____6114 3 8 1____6118 119 12 121 3________ 614 ________ 61____6125 _______ 63 18 1 129 133 134 135 12 153 154 12 123 157 12 126 Trong loạt bài này, chúng ta sẽ tạo một máy tính đơn giản với HTML, CSS và JavaScript cơ bản. Máy tính của chúng tôi sẽ chỉ có thể thực hiện các phép toán cơ bản. cộng, trừ, nhân và chia. Để hiểu rõ hơn về hướng dẫn này, bạn cần có một chút kiến thức về HTML và CSS Nếu bạn chưa biết chúng, không cần phải lo lắng. Tôi đã đơn giản hóa hướng dẫn này tốt nhất có thể, vì vậy bạn sẽ tồn tại. ) Vì vậy, chính xác những gì chúng ta cần để xây dựng này? Như bạn có thể đã đoán, chúng ta sẽ cần tạo các “nút” để nhập các giá trị và một màn hình để hiển thị các giá trị này Vâng, về cơ bản, đó là nó Nhưng nói một cách dễ hiểu hơn, đây là những thành phần chúng ta cần · Khu vực hiển thị để hiển thị toán tử, toán hạng và giải pháp · Các nút nhập giá trị vào màn hình hiển thị Trực quan, một máy tính là một bảng được đặt trong một thùng chứa. Và như bạn đã biết bảng được tạo thành từ các hàng và cột với các ô để chứa dữ liệu bảng Bây giờ bạn đã có các khái niệm, hãy bắt đầu Đây là định dạng cơ bản cho tài liệu HTML Nếu bạn chưa hiểu cách triển khai các tập lệnh HTML, bạn nên xem hướng dẫn ngắn này Phần hiển thị của trang web đi vào thẻ 01 0Trước khi tôi tiếp tục, điều cần thiết là bạn phải hiểu một số thuật ngữ HTML (từ ưa thích) chẳng hạn như thẻ, thuộc tính và thành phần thẻ. Thẻ là các nhãn cơ bản xác định và phân tách các phần đánh dấu của bạn thành các phần tử. Chúng bao gồm một từ khóa được bao quanh bởi dấu ngoặc nhọn 1. Nội dung nằm giữa hai thẻ và thẻ đóng có tiền tố là dấu gạch chéo (Lưu ý. có một số thẻ HTML tự đóng, như thẻ hình ảnh)
Thuộc tính. Thuộc tính của phần tử HTML được sử dụng để cung cấp hướng dẫn bổ sung cho thẻ HTML đã cho. Thuộc tính được chỉ định trong thẻ HTML mở
yếu tố. Một phần tử HTML thường bao gồm thẻ mở và thẻ kết thúc, với nội dung được chèn vào giữa
Được chứ. Đủ với những điều cơ bản. Nhảy đi Thứ đầu tiên đi vào phần thân HTML của chúng ta là thành phần biểu mẫu 2 3 Sau khi nó được tạo, một thuộc tính có tiêu đề “tên”, với giá trị, máy tính, sau đó sẽ được thêm vào thẻ biểu mẫu mở________số 8Phần tử 4 dùng làm trình bao bọc (vùng chứa) cho bảng sẽ chứa các thành phần máy tính chínhĐược rồi, tiếp theo là gì? Tiếp theo, chúng ta cần tạo bảng Vậy bàn là gì? Xin thứ lỗi cho nỗ lực kém cỏi của tôi trong việc pha trò Các bảng HTML cho phép các nhà thiết kế web sắp xếp dữ liệu như văn bản, hình ảnh, liên kết, các bảng khác, v.v. thành hàng và cột của ô. Chúng được tạo bằng cách sử dụng thẻ 5 trong đó thẻ 6 được sử dụng để tạo các hàng của bảng và 7 được sử dụng để tạo các ô dữ liệuNhân tiện, hàng là hàng ngang và cột là hàng dọc Nói đủ rồi, hãy viết mã ngay bây giờ Bên trong thẻ đóng và mở 2, chúng ta cần tạo một phần tử bảng 4Đó là một làn gió, phải không? TIÊU ĐIỂMBên trong thẻ 5, chúng ta cần xác định các hàng của bảng 6 về cơ bản sẽ là phần nằm ngang của máy tính và dữ liệu của bảng 7 (ô cột của bảng) chứa màn hình máy tính và các nútPhần ngang đầu tiên của máy tính của chúng tôi là chứa màn hình hiển thị Phần ngang thứ hai là để chứa bộ nút đầu tiên. Cái đầu tiên là 2, cái thứ hai là 3, cái thứ ba là 4 và cái thứ tư là dấu cộng 5Phần ngang thứ ba cũng chứa các nút. Cái đầu tiên là 6, cái thứ hai là 7, cái thứ ba là 8 và cái thứ tư là dấu trừ 9khác tiết diện ngang? Hãy viết mã 6Đó là phần nằm ngang đầu tiên, chứa khu vực hiển thị của máy tính Chào. Không cần cuộn lên. Bạn nói đúng, tôi chưa nói về yếu tố 0 và mọi thứ khác ở giữaVậy phần tử 1 là gì?Một yếu tố đầu vào là một yếu tố hình thức - yếu tố quan trọng nhất tại đó. Phần tử đầu vào có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính 2. Nếu bạn đang theo sát, tôi cá là bạn đang thắc mắc tại sao thuộc tính loại của chúng tôi 3 được đặt thành văn bản chứ không phải sốĐây là câu trả lời của bạn, một máy tính không chỉ hiển thị các số mà còn hiển thị các toán tử. Vì vậy, thuộc tính loại phải được đặt thành văn bản để chứa cả số và ký hiệu (toán tử) Đối với hướng dẫn này, tôi sẽ không nói về thuộc tính id và class thực sự là gì và chúng được sử dụng như thế nào. Cuối cùng, đối với phần ngang đầu tiên, có thuộc tính bị vô hiệu hóa. Thuộc tính 4 là thuộc tính 5. Khi xuất hiện, nó chỉ định rằng phần tử 6 sẽ bị vô hiệu hóa. Phần tử đầu vào 4 không sử dụng được và không thể nhấp được. Điểm làm cho yếu tố đầu vào của chúng tôi bị vô hiệu hóa là làm cho nút máy tính trở thành cách duy nhất người dùng có thể gửi văn bản tới màn hình. Chúng tôi không muốn người dùng nhập bảng chữ cái ngẫu nhiên trong khu vực hiển thị, phải không?Bây giờ, phần ngang thứ hai Ở đây, có bốn cột ô của bảng. Vì vậy, chúng tôi phải sử dụng thẻ dữ liệu bảng 7 bốn lần để xác định chúng 6Thẻ 7 đầu tiên chứa số 0 thẻ thứ hai dành cho số 3, v.v. Để biến phần tử 1 thành nút, thuộc tính 2 phải được đặt thành nútBất cứ điều gì đi vào thuộc tính giá trị 4 là những gì sẽ được hiển thị trên nút Bây giờ thuộc tính onclick Nếu bạn đã đi xa đến mức này, bạn nên lấy một chai bia. Bạn xứng đáng với nó Thuộc tính onclick xác định những gì được chạy khi nhấp chuột xảy ra. Nó khiến một khối mã JavaScript chạy Đối với hướng dẫn này, tôi sẽ không đi sâu vào việc sử dụng thuộc tính onclick Về cơ bản, mã chứa trong thuộc tính onclick chỉ đơn giản là yêu cầu trình duyệt web hiển thị bất kỳ giá trị nào mà nút giữ khi được nhấp vào. Giá trị thực của 1 chỉ được sửa đổi với 6 (thêm vào). Nếu đầu vào máy tính hiện tại là 7 và nhấp vào 8, thì 8 sẽ được thêm vào. sau đó nó trở thành 40, tức là 41. Nếu không có biểu tượng “append to”, số 8 sẽ ghi đè lên 7. Và chỉ có 8 được hiển thị trên màn hình máy tính Nội dung cho phần ngang thứ hai nên được lặp lại cho hàng thứ ba và thứ tư. Tất cả những gì sẽ được thay đổi là giá trị 1Nhưng mọi thứ sẽ khác một chút đối với hàng thứ năm Tại sao? tương đương với chức năng Thuộc tính onclick 46 của hàm 47 sẽ chứa một chút khác biệt so với phần còn lại 6Điều mà 48 làm là diễn giải giá trị của đầu vào dưới dạng Javascript. Vì vậy, khi có một 49 trong đầu vào, nó sẽ được đánh giá là Javascript và trả về 8 dippee Điều đó không quá khó, phải không? Khi tất cả các thành phần riêng lẻ được ghép lại với nhau, chúng ta có một máy tính đầy đủ chức năng (không quá hấp dẫn) Đây là mã nguồnVâng, tôi đã nói không hấp dẫn lắm. Để làm cho máy tính hấp dẫn hơn, các phần tử phải được tạo kiểu bằng CSS — Cascading Style Sheet Làm cách nào để tạo máy tính đơn giản trong 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 JavaScript bằng chức năng?hàm tính toán (opreator,res) { var a,b; một = tài liệu. getElementById("text1"). giá trị; b = tài liệu. getElementById("text2"). giá trị; var result = eval(a+opreator+b); tài liệu. getElementById(res). giá trị = kết quả; trả về kết quả; Làm cách nào để tính toán bằng JavaScript?Chuyển đổi sang kiểu dữ liệu số . để myNumber = "74"; . . loại số của tôi; để myNumber = "74"; Làm cách nào để tạo một máy tính đơn giản bằng HTML CSS và JavaScript?Bạn có thể sử dụng bộ chọn DOM để nhắm mục tiêu các thành phần khác nhau của trang. . hàm clearScreen() { tài liệu. getElementById("kết quả"). giá trị = ""; chức năng hiển thị (giá trị) { tài liệu. getElementById("kết quả"). giá trị += giá trị; hàm tính toán () { var p = tài liệu. getElementById("kết quả"). giá trị; |