Tạo tiện ích máy tính online đơn giản với jQuery

Xin chào các bạn, để tiếp nối series bài tập jQuery, hôm nay mình sẽ hướng dẫn các bạn làm một tiện ích máy tính online đơn giản bằng HTML, CSS và jQuery. Đây là một bài tập giúp các bạn nắm vững và rèn luyện lại kiến thức về jQuery, ngoài ra có thể tự tạo được một máy tính đơn giản để có thể thêm vào tiện ích online cho website hoặc blog của mình. Tuy nói đơn giản nhưng nó có tính năng thực hiện nhiều phép toán cùng một lúc và thực hiện liên tiếp phép toán mà ở một số máy tính online khác không hề có. OK, bây giờ chúng ta sẽ bắt tay vào việc nhé !

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Xây dựng layout cho máy tính

Đầu tiên các bạn tạo file index.html và copy nội dung này vào :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tiện ích máy tính online</title>
	<style>
	
	</style>
</head>
<body>
	<div class="calculator">
		<input type="text" class="box-calculation" value="">
		<input type="text" class="box-result" value="">
		<div class="box-button">
			<button class="refresh">CE</button>
			<button class="del">Del</button>
			<button class="plus operation">+</button>
			<button class="minus operation">-</button>
			<button class="times operation">*</button>
			<button class="divide operation">/</button>
			<button class="number">9</button>
			<button class="number">8</button>
			<button class="number">7</button>
			<button class="number">6</button>
			<button class="number">5</button>
			<button class="number">4</button>
			<button class="number">3</button>
			<button class="number">2</button>
			<button class="number">1</button>
			<button class="number">0</button>
			<button class="dot">.</button>
			<button class="equal">=</button>
		</div>
	</div>	
	<script src="http://code.jquery.com/jquery.js"></script>
	<script>
		
	</script>
</body>
</html>

Trong đó :

.calculator là khung chứa toàn bộ máy tính.
.box-calculation là ô chứa chuỗi phép tính.
.box-result là ô chứa kết quả.
.box-button là khung chứa toàn bộ các nút của máy tính.
- .refresh là nút làm mới lại máy tính.
- .del là nút xoá một ký tự trong chuỗi phép tính.
- .operation là các nút phép toán :
  - .plus là nút cộng.
  - .minus là nút trừ.
  - .times là nút nhân.
  - .divide là nút chia.
- .number là các nút số từ 0-9.
- .dot là nút dấu chấm, dùng để tạo số thập phân.
- .equal là nút bằng để hiển thị kết quả.
Cặp thẻ style là nơi chúng ta viết giao diện cho máy tính (Xem ở bước 2).
Cặp thẻ script là nơi viết các chức năng và xử lý của máy tính (Xem ở bước 3).
Ngoài ra mình còn liên kết thư viện Jquery trong đoạn code trên.

2. Viết giao diện cho máy tính

Các bạn copy đoạn code này vào bên trong cặp thẻ style :

Bài viết này được đăng tại [free tuts .net]

* {padding: 0; margin: 0;}
body {font-family: sans-serif; font-size: 14px; color: #333;}
.calculator {width: 300px; height: auto; margin: 20px auto; padding: 10px; border: 1px solid #666; border-radius: 4px;}
.box-calculation {width: calc(100% - 16px); background-color: #f7f8f9; border: 1px solid #666; padding: 5px 7px; font-size: 20px; border-bottom: none;}
.box-result {width: calc(100% - 16px); background-color: #f9f9f9; border: 1px solid #666; padding: 5px 7px; font-size: 20px; border-top: none; text-align: right;}
.box-button button {width: 32.4%; height: 40px; margin-top: 5px; font-size: 20px; color: #fff; border: none; cursor: pointer; border-radius: 4px;}
button.number {background-color: #428bca;}
button.operation {background-color: #5cb85c;}
button.refresh {background-color: #d9534f;}
button.del {background-color: #f0ad4e;}
button.dot, button.equal {background-color: #5bc0de;}

Sau khi xong, các bạn sẽ được giao diện như thế này :

display calculator jquery jpg

Đây chỉ là giao diện mình tự thiết kế, nếu bạn nào muốn thì có thể thay đổi giao diện khác theo ý thích và phù hợp với website hoặc blog của mình nhé !

3. Viết chức năng và xử lý của máy tính bằng jQuery

Phần này là phần quan trọng nhất của bài, các bạn phải làm từ từ và theo từng bước để có thể hiểu rõ nhé. Trong từng phần con mình sẽ giải thích thuật toán nên các bạn đừng lo lắng.

Trước tiên cần thiết lập một số thứ khi vừa load trang xong, các bạn copy đoạn code này rồi chèn vào trong cặp thẻ script.

// Thực hiện các hành động bên trong khi tài liệu html của trang web được load xong và cây DOM được tạo thành
$(document).ready(function() {
	$('.box-calculation').attr('disabled', 'true'); // Vô hiệu hoá ô phép tính
	$('.box-result').attr('disabled', 'true'); // Vô hiệu hoá ô kết quả
	$('.box-button button.times').attr('disabled', 'true'); // Vô hiệu hoá nút nhân
	$('.box-button button.divide').attr('disabled', 'true'); // Vô hiệu hoá nút chia
	$('.box-button button.equal').attr('disabled', 'true'); // Vô hiệu hoá nút bằng
});

Giải thích :

Chúng ta phải vô hiệu hoá 2 ô phép tính và kết quả để người dùng không thể nhập bất kỳ nội dung nào vào bên trong mà phải thông qua các nút của máy tính.
Vì sao lại vô hiệu hoá các nút nhân, chia, bằng :
- Nút nhân: khi bắt đầu một phép tính thì không thể bắt đầu bằng dấu nhân được.
- Nút chia: tương tự như nút nhân.
- Nút bằng: mới vừa load trang xong, chưa nhập phép tính gì nên cần vô hiệu hoá nút bằng.

Tiếp theo, chúng ta viết chức năng cho các nút số, các bạn chèn tiếp nội dung sau :

// Thực hiện các hành động bên trong khi click vào các nút số
	$('.box-button button.number').on('click', function() {
	$char = $(this).html(); // Lấy số vừa click
	$value_calculation = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-calculation').val($value_calculation + $char); // Thêm số vừa click vào sau chuỗi giá trị trong ô phép tính
	$('.box-button button.operation').removeAttr('disabled'); // Gỡ bỏ vô hiệu hoá các nút phép toán
	$('.box-button button.equal').removeAttr('disabled'); // Gỡ bỏ vô hiệu hoá nút bằng
});

Giải thích :

Sau khi nhập một số thì ta có thể thêm một phép toán nên ta cần gỡ bỏ vô hiệu hoá các nút phép toán.
Tất nhiên rồi, đã có số thì ta đã có thể hiển thị kết quả nên việc gỡ bỏ vô hiệu hoá nút bằng là điều tất nhiên.

Giờ tới nút dấu chấm, sao chép nội dung sau và chèn tiếp bên dưới code :

// Thực hiện các hành động bên trong khi click vào các nút dấu chấm
$('.box-button button.dot').on('click', function() {
	$char = $(this).html(); // Lấy dấu chấm
	$value_calculation = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-calculation').val($value_calculation + $char); // Thêm dấu chấm vào sau chuỗi giá trị trong ô phép tính
	$('.box-button button.operation').attr('disabled', 'true'); // Vô hiệu hoá các nút phép toán
	$(this).attr('disabled', 'true'); // Vô hiệu hoá nút dấu chấm
});

Giải thích :

Sau một dấu chấm phải là một con số chứ không phải là một phép toán nên cần vô hiệu hoá tất cả các nút phép toán.
Không thể nào mà có nhiều dấu chấm lặp lại liên tiếp nên khi click vào nút dấu chấm thì tự vô hiệu hoá nó luôn.

Kế tiếp là viết chức năng của nút CE, copy đoạn code sau và chèn tiếp vào bên dưới :

// Thực hiện các hành động bên trong khi click vào các nút CE
$('.box-button button.refresh').on('click', function() {
	$('.box-calculation').val(''); // Làm trống ô phép tính
	$('.box-result').val(''); // Làm trống ô kết quả
});

Giải thích : Như mình đã nói thì nút CE có chức năng làm mới máy tính nên nó sẽ làm mới cả 2 ô phép tính và kết quả.

Bây giờ là nút Del, các bạn chèn tiếp nội dung sau vào bên dưới :

// Thực hiện các hành động bên trong khi click vào các nút Del
	$('.box-button button.del').on('click', function() {
	$string = $('.box-calculation').val(); // Lấy giá trị trong ô phép tính
	$('.box-calculation').val($string.substring(0, $string.length - 1)); // Xoá ký tự cuối cùng chuỗi giá trị trong ô phép tính
});

Giải thích : Bên trong code mình có sử dụng hàm substring(), nếu bạn nào chưa biết có thể tham khảo bài các hàm xử lý chuỗi trong Javascript để hiểu rõ công dụng của nó nhé !

Tiếp tục chúng ta sẽ viết chức năng cho các nút phép toán, các bạn copy và dán tiếp vào bên dưới :

// Thực hiện các hành động bên trong khi click vào các nút phép toán
	$('.box-button button.operation').on('click', function() {
	$char = $(this).html(); // Lấy dấu phép toán vừa click
	$value_calculation = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-calculation').val($value_calculation + $char); // Thêm dấu phép toán vừa click vào sau chuỗi giá trị trong ô phép tính
	$('.box-button button.times').attr('disabled', 'true'); // Vô hiệu hoá nút nhân
	$('.box-button button.divide').attr('disabled', 'true'); // Vô hiệu hoá nút chia
	$('.box-button button.dot').removeAttr('disabled'); // Gỡ bỏ vô hiệu hoá nút dấu chấm
});

Giải thích :

Trong các phép toán chỉ có cộng và trừ có thể lặp lại nhiều lần liên tiếp (Vd : +3-+2=1) nên khi click vào nút phép toán nào đó thì phải vô hiệu nút nhân và chia, vì hai nút này không thể nào lặp lại nhiều lần liên tiếp được (Vd: 3/*4 = Math Error).
Ngoài ra khi click vào nút phép toán thì tiếp theo sẽ là một con số nên chúng ta sẽ gỡ bỏ vô hiệu hoá nút dấu chấm để có thể tạo được số thập phân.

Cuối cùng là nút bằng, nút này là nút quan trọng nhất để có thể show ra được kết quả phép tính, các bạn copy và chèn tiếp đoạn code sau :

// Thực hiện các hành động bên trong khi click vào các nút bằng
$('.box-button button.equal').on('click', function() {
	$result = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-result').val(eval($result)); // Hiển thị kết quả trong ô kết quả
});

Giải thích : Trong đoạn code này mình có sử dụng hàm eval() trong Javascript để trả về giá trị số của một chuỗi số, các bạn có thể tham khảo tại đây ở trang W3schools.

Tổng hợp toàn bộ code trong phần này ta được như sau :

// Thực hiện các hành động bên trong khi tài liệu html của trang web được load xong và cây DOM được tạo thành
$(document).ready(function() {
	$('.box-calculation').attr('disabled', 'true'); // Vô hiệu hoá ô phép tính
	$('.box-result').attr('disabled', 'true'); // Vô hiệu hoá ô kết quả
	$('.box-button button.times').attr('disabled', 'true'); // Vô hiệu hoá nút nhân
	$('.box-button button.divide').attr('disabled', 'true'); // Vô hiệu hoá nút chia
	$('.box-button button.equal').attr('disabled', 'true'); // Vô hiệu hoá nút bằng
});

// Thực hiện các hành động bên trong khi click vào các nút số
	$('.box-button button.number').on('click', function() {
	$char = $(this).html(); // Lấy số vừa click
	$value_calculation = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-calculation').val($value_calculation + $char); // Thêm số vừa click vào sau chuỗi giá trị trong ô phép tính
	$('.box-button button.operation').removeAttr('disabled'); // Gỡ bỏ vô hiệu hoá các nút phép toán
	$('.box-button button.equal').removeAttr('disabled'); // Gỡ bỏ vô hiệu hoá nút bằng
});

// Thực hiện các hành động bên trong khi click vào các nút dấu chấm
$('.box-button button.dot').on('click', function() {
	$char = $(this).html(); // Lấy dấu chấm
	$value_calculation = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-calculation').val($value_calculation + $char); // Thêm dấu chấm vào sau chuỗi giá trị trong ô phép tính
	$('.box-button button.operation').attr('disabled', 'true'); // Vô hiệu hoá các nút phép toán
	$(this).attr('disabled', 'true'); // Vô hiệu hoá nút dấu chấm
});

// Thực hiện các hành động bên trong khi click vào các nút CE
$('.box-button button.refresh').on('click', function() {
	$('.box-calculation').val(''); // Làm trống ô phép tính
	$('.box-result').val(''); // Làm trống ô kết quả
});

// Thực hiện các hành động bên trong khi click vào các nút phép toán
	$('.box-button button.operation').on('click', function() {
	$char = $(this).html(); // Lấy dấu phép toán vừa click
	$value_calculation = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-calculation').val($value_calculation + $char); // Thêm dấu phép toán vừa click vào sau chuỗi giá trị trong ô phép tính
	$('.box-button button.times').attr('disabled', 'true'); // Vô hiệu hoá nút nhân
	$('.box-button button.divide').attr('disabled', 'true'); // Vô hiệu hoá nút chia
	$('.box-button button.dot').removeAttr('disabled'); // Gỡ bỏ vô hiệu hoá nút dấu chấm
});

// Thực hiện các hành động bên trong khi click vào các nút bằng
$('.box-button button.equal').on('click', function() {
	$result = $('.box-calculation').val(); // Lấy chuỗi giá trị trong ô phép tính
	$('.box-result').val(eval($result)); // Hiển thị kết quả trong ô kết quả
});

OK ! Bây giờ các bạn chạy thử và xem thành quả của mình suốt bài học này nhé !

4. Lời kết

Qua bài này, mình hi vọng các bạn đã có thể áp dụng và rèn luyện lại kiến thức Jquery để có thể tạo cho mình được một tiện ích máy tính đơn giản online với ngôn ngữ này. Bài nay hơi dài và có nhiều thuật toán hơi khó hiểu nên bạn nào thắc mắc cứ comment bên dưới hoặc đăng bài trên group facebook kèm theo link bài viết để được hỗ trợ nhé ! Hẹn gặp lại và chúc các bạn thành công !

Danh sách file tải về

Tên file tải về	Pass giải nén
Máy tính online Jquery	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Tạo tiện ích máy tính online đơn giản với jQuery

1. Xây dựng layout cho máy tính

2. Viết giao diện cho máy tính

3. Viết chức năng và xử lý của máy tính bằng jQuery

4. Lời kết

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

fadeIn() và fadeOut() trong jQuery

Show() và Hide() trong jQuery

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Tạo tiện ích máy tính online đơn giản với jQuery

1. Xây dựng layout cho máy tính

​2. Viết giao diện cho máy tính

3. Viết chức năng và xử lý của máy tính bằng jQuery

4. Lời kết

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

fadeIn() và fadeOut() trong jQuery

Show() và Hide() trong jQuery

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Giới thiệu

Thủ thuật

Link hay

Liên kết

2. Viết giao diện cho máy tính