2,440 lượt đọc

Cách tốt nhất để tạo một máy tính đơn giản bằng HTML và JavaScript

từ tác giả Shuseel Baral5m2023/08/01

dài quá đọc không nổi

Dưới đây là các bước để tạo một máy tính đơn giản sử dụng HTML và JavaScript có thể thực hiện phép tính số học đơn giản trên các số nguyên.

featured image - Cách tốt nhất để tạo một máy tính đơn giản bằng HTML và JavaScript

Xây dựng một máy tính đơn giản sử dụng HTML và JavaScript có thể là một công việc thú vị và mang tính giáo dục cho các nhà phát triển web mới bắt đầu.

Bằng cách kết hợp các khả năng của HTML để thiết kế giao diện người dùng và JavaScript để xử lý tính toán, bạn có thể xây dựng một máy tính hoạt động và tương tác ngay trong trình duyệt của mình.

Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn quy trình từng bước tạo một máy tính cơ bản từ đầu đồng thời khám phá các nguyên tắc lập trình web trên đường đi.

Để bắt đầu, trước tiên chúng ta phải tạo môi trường dự án. Chúng ta sẽ xây dựng khung HTML cơ bản để làm nền tảng cho máy tính của chúng ta. Ngoài ra, để làm cho máy tính hấp dẫn hơn về mặt hình ảnh, chúng ta sẽ thiết lập giao diện của máy tính bằng CSS.

Cuối cùng, chúng tôi sẽ định cấu hình môi trường JavaScript để thêm chức năng vào máy tính của chúng tôi.

Mục lục

Các bước để tạo một máy tính đơn giản bằng HTML và JavaScript
- 1. Thiết kế giao diện người dùng
- 1. Xử lý đầu vào của người dùng
- 1. Thực hiện tính toán
Mã HTML đầy đủ cho máy tính HTML đơn giản
Xem trước máy tính HTML đơn giản
Phần kết luận

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

Dưới đây là các bước để tạo một máy tính đơn giản sử dụng HTML và JavaScript có thể thực hiện phép tính số học đơn giản trên các số nguyên.

Đầu vào văn bản và nút được sử dụng trên bảng trong phần tử biểu mẫu và sự kiện OnClick được sử dụng để đặt các giá trị nút trên màn hình hoặc để đánh giá các con số.

1. Thiết kế giao diện người dùng

Giao diện người dùng (UI) là mặt trước của máy tính. Chúng tôi sẽ tạo một màn hình rõ ràng để hiển thị đầu vào và kết quả. Chúng tôi cũng sẽ cung cấp các nút tương tác cho số nguyên và toán tử. Mục tiêu của chúng tôi là tạo ra một thiết kế trực quan và thân thiện với người dùng, làm phong phú thêm mọi khía cạnh của người dùng máy tính.

Sử dụng các bước sau để thiết kế giao diện người dùng của máy tính.

Bước 1. Ban đầu, tạo thẻ <html> cùng với phần tử <form> và thẻ <body> như bên dưới.

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

Bước 2. Bây giờ, hãy tạo một bảng trong thẻ <form>……</form> bằng cách sử dụng thẻ <table> …..</table> và chèn hai loại Văn bản đầu vào và các nút trong dữ liệu bảng của hàng của bảng bằng cách sử dụng <tr Thẻ ><td>….</td></tr>.

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

Bước 3. Sau đó, tạo các nút bằng cách sử dụng thẻ <input>, đồng thời đặt “id” và “value” của các nút này trong hàng của bảng có thẻ <tr><td>….</td></tr> làm trình bày bên dưới.

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

Bước 4. Cuối cùng, thêm mã CSS sau để tạo thiết kế cho máy tính với thẻ <style>…..</style> như bên dưới.

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. Xử lý đầu vào của người dùng

Sử dụng các bước sau để thiết kế giao diện người dùng của máy tính.

#Bước 1. Chỉ định một sự kiện “onkeypress” cho một nút hiển thị đã được tạo để hiển thị đầu vào và kết quả của phép tính như dưới đây.

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

Bước 2. Chỉ định một sự kiện OnClick cho tất cả các nút có số và toán tử số học như bên dưới.

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. Thực hiện phép tính

Chỉ định một sự kiện OnClick cho tất cả các toán tử số học, cung cấp một dấu nháy kép có dấu cách (“”) cho nút Clear(C) và sử dụng hàm eval() để đánh giá các số trong sự kiện OnClick như được cung cấp bên dưới.

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

Mã HTML đầy đủ cho Máy tính HTML đơn giản

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>