Hãy bắt đầu học tạo một máy tính đơn giản của riêng bạn bằng HTML, CSS và JavaScript cùng FUNiX. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một máy tính đơn giản có thể thực hiện các phép toán cơ bản như cộng, trừ, nhân và chia.
Contents
1. Các thành phần của Máy tính
Máy tính được tạo bằng HTML, CSS và JavaScript bao gồm các thành phần sau:
Bạn đang xem: Tạo Một Máy Tính Đơn Giản Bằng HTML, CSS và JavaScript
Toán tử: Phép cộng (+), Phép trừ (-), Phép nhân (*) và Phép chia (/).
Nút chữ số và thập phân: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . . .
Màn hình hiển thị: Hiển thị biểu thức toán học và kết quả.
Nút Xóa màn hình: Xóa tất cả các giá trị toán học.
Nút tính toán (=): Đánh giá biểu thức toán học và trả về kết quả.
2. Cấu trúc thư mục của Dự án Máy tính
Xem thêm : Lập Trình Hướng Đối Tượng (OOP) với PHP: Giải pháp tối ưu cho phát triển phần mềm
Trước khi bắt đầu tạo máy tính, hãy tạo một thư mục gốc để chứa các tệp HTML, CSS và JavaScript. Bạn có thể đặt tên thư mục theo ý muốn. Trong ví dụ này, chúng ta đặt tên thư mục gốc là “Calculator” (Máy tính). Tên các tệp HTML, CSS và JavaScript cũng được đặt theo quy ước đặt tên tiêu chuẩn là “index.html”, “styles.css” và “script.js”.
3. Mã HTML
Mở tệp “index.html” và dán mã sau:
<!DOCTYPE html>
<html lang="vi" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tạo Một Máy Tính Đơn Giản Bằng HTML, CSS và JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator">
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<td> <input class="button" type="button" value="C" onclick="clearScreen()" style="background-color: #fb0066;" /> </td>
</tr>
<tr>
<td> <input class="button" type="button" value="1" onclick="display('1')" /> </td>
<td> <input class="button" type="button" value="2" onclick="display('2')" /> </td>
<td> <input class="button" type="button" value="3" onclick="display('3')" /> </td>
<td> <input class="button" type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input class="button" type="button" value="4" onclick="display('4')" /> </td>
<td> <input class="button" type="button" value="5" onclick="display('5')" /> </td>
<td> <input class="button" type="button" value="6" onclick="display('6')" /> </td>
<td> <input class="button" type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input class="button" type="button" value="7" onclick="display('7')" /> </td>
<td> <input class="button" type="button" value="8" onclick="display('8')" /> </td>
<td> <input class="button" type="button" value="9" onclick="display('9')" /> </td>
<td> <input class="button" type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input class="button" type="button" value="." onclick="display('.')" /> </td>
<td> <input class="button" type="button" value="0" onclick="display('0')" /> </td>
<td> <input class="button" type="button" value="=" onclick="calculate()" style="background-color: #fb0066;" /> </td>
<td> <input class="button" type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Cấu trúc của máy tính được tạo bằng cách sử dụng thẻ <table>
. Thẻ <table>
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ẻ <tr>
. Mỗi thẻ <tr>
chứa các thẻ <td>
(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.
4. Mã CSS
Mở tệp “styles.css” và dán mã sau:
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
.button {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
.button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
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 font chữ “Orbitron” từ Google Fonts.
5. Mã JavaScript
Mở tệp “script.js” và dán mã sau:
// This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function display values
function display(value) {
document.getElementById("result").value += value;
}
// This function evaluates the expression and return result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Xem thêm : Học Lập Trình Scratch Cho Trẻ Em – Bài 4: Các Thao Tác Cơ Bản Trong Phần Mềm Scratch
Trong mã JavaScript trên, chúng ta sử dụng các hàm clearScreen()
, display()
và calculate()
để thêm các 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.
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ả.
Đánh giá biểu thức:
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 được gán lại cho kết quả.
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, bạn cũng có thể xem phiên bản trực tiếp của dự án này qua GitHub.
6. Phát triển các dự án lập trình thú vị
Bạn có thể nâng cao kỹ năng lập trình của mình lên một tầm cao mới bằng cách phát triển các dự án. Dù bạn là người mới bắt đầu hay đã 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 sẽ tăng sự tự tin của bạn rất nhiều.
Nếu bạn đang có nhu cầu tìm hiểu thêm về khóa học lập trình đi làm ngay, hãy liên hệ với FUNiX ngay tại đây.
Xem thêm chuỗi bài viết liên quan:
- FUNiX – Học lấy bằng đại học trực tuyến giá trị ngang bằng đại học chính quy
- Cách tạo Mẫu F và Z bằng HTML và CSS
- Tạo biểu mẫu xác thực CAPTCHA bằng HTML, CSS và JavaScript
- Cách tạo đồng hồ kỹ thuật số bằng HTML, CSS và JavaScript
Đó là những thông tin cần biết để tạo một máy tính đơn giản bằng HTML, CSS và JavaScript. Hãy thử tạo máy tính riêng của bạn và khám phá thêm nhiều dự án lập trình thú vị khác nhé!
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/build-a-simple-calculator-using-html-css-javascript/
Nguồn: https://laptrinhc.edu.vn
Danh mục: Ngôn ngữ lập trình