Cách tạo một máy tính đơn giản bằng HTML, CSS và JavaScript
Cách tốt nhất để học JavaScript là xây dựng các dự án. Nếu bạn muốn trở thành một nhà phát triển web giỏi, bạn cần bắt đầu tạo các dự án càng sớm càng tốt. Bạn có thể bắt đầu bằng cách xây dựng các dự án cấp độ người mới bắt đầu như máy tính đơn giản, đồng hồ kỹ thuật số hoặc đồng hồ bấm giờ.
Bạn có thể tạo một máy tính đơn giản chỉ bằng các công nghệ web cốt lõi: HTML, CSS và JavaScript. Máy tính này có thể thực hiện các phép toán cơ bản như cộng, trừ, nhân và chia.
Mục Lục
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ột máy tính có các tính năng sau:
- Nó sẽ thực hiện các phép toán số học cơ bản như cộng, trừ, chia và nhân.
- Nó sẽ thực hiện các phép toán thập phân.
- Máy tính sẽ hiển thị vô cực nếu bạn cố gắng chia bất kỳ số nào cho không.
- Nó sẽ không hiển thị bất kỳ kết quả nào trong trường hợp biểu thức không hợp lệ. Ví dụ: 5 ++ 9 sẽ không hiển thị bất cứ thứ gì.
- Tính năng xóa màn hình để xóa màn hình hiển thị bất cứ lúc nào bạn muốn.
Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT. Nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem bản demo này.
Các thành phần của Máy tính
Máy tính bao gồm các thành phần sau:
Toán tử toán học: Phép cộng (+), Phép trừ (-), Phép nhân
và Division (/).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ị
: Nó hiển thị biểu thức toán học và kết quả.Nút xóa màn hình
: Nó xóa tất cả các giá trị toán học.Nút tính toán (=)
Các thành phần cơ bản của máy tính được chia thành màn hình và các đầu vào chính.
Cấu trúc thư mục của Dự án Máy tính 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 tệp bất kỳ thứ gì bạn muốn. Ở đây, thư mục gốc được đặt tên làMáy tính . Theo quy ước đặt tên tiêu chuẩn, các tệp HTML, CSS và JavaScript được đặt tênindex.html ,styles.css và script.js
Cấu trúc thư mục của dự án máy tính
Mã HTML Mở index.html
<!DOCTYPE html>
<html lang="en" dir="ltr"><head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and 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>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
tệp và dán mã HTML sau vào máy tính: Dự án này sử dụng một
Hàng máy tính
Mã CSS Mở styles.css
@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:
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:
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
background-color:
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color:
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background:
-webkit-box-shadow: inset 0px 0px 5px
-moz-box-shadow: inset 0px 0px 5px
box-shadow: inset 0px 0px 5px
}
và dán mã CSS sau vào máy tính: CSS trên tạo kiểu cho máy tính. Các .lớp bộ chọn trong CSS chọn các phần tử có thuộc tính lớp cụ thể. Các .máy tính và .hộp trưng bày bộ chọn lớp định kiểu cấu trúc bảng và màn hình hiển thị của máy tính tương ứng. @nhập khẩu nhập khẩu Họ phông chữ Orbitron
từ phông chữ của Google.
Mã JavaScript Mở script.js
function clearScreen() {
document.getElementById("result").value = "";
}
function display(value) {
document.getElementById("result").value += value;
}
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
và thêm chức năng vào máy tính đơn giản bằng cách sử dụng mã JavaScript sau:
Hiểu mã JavaScript CácclearScreen () ,trưng bày() và tính toán()
chức năng thêm chức năng cho Máy tính.
Xóa giá trị Các clearScreen () chức năng truy cập DOM bằng cách sử dụng Tôi
function clearScreen() {
document.getElementById("result").value = "";
}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 rỗng. 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.
Hiển thị giá trị Các trưng bày() hàm truy cập DOM bằng cách sử dụng Tôi
function display(value) {
document.getElementById("result").value += value;
}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 Các tính toán() hàm truy cập DOM bằng cách sử dụng Tôi của kết quả và đánh giá biểu thức bằng cách sử dụng eval ()
hàm số. Giá trị đã đánh giá của biểu thức lại được gán cho kết quả. JavaScript eval ()
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}hàm đánh giá một biểu thức mà bạn chuyển cho nó. Nó trả về kết quả của biểu thức đó.
Phát triển các dự án lập trình thú vị
Bạn có thể cải thiện kỹ năng viết mã của mình 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 trở lại viết mã sau một thời gian nghỉ việc. Việc tạo ra các ứng dụng hoạt động đầy đủ, ngay cả những ứng dụng đơn giản, có thể nâng cao sự tự tin của bạn.
Bạn có thể thử nhiều dự án đơn giản từ trò chơi (cờ vua, tic-tac-toe, Rock Paper Scissors) đến các tiện ích đơn giản (danh sách việc cần làm, chuyển đổi trọng lượng, đồng hồ đếm ngược).
Hãy nhúng tay vào những dự án này và trở thành một nhà phát triển giỏi hơn.