Cách tạo button kết nối với gmail trên web
Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn xây dựng một ứng dụng máy tính bỏ túi bằng Javascript giúp các bạn có thể nắm rõ hơn và thực hành những thứ mình đã học về Javascript. Bây giờ hãy cùng nhau tìm hiểu nhé!
Việc đầu tiên là mình sẽ tạo file có cấu trúc thư mục như sau:
Tiếp theo chúng ta sẽ tạo liên kết may_tinh.js và may_tinh.css đến trang may_tinh.html bằng 2 dòng code sau đây:
- Liên kết CSS:
- Liên kết Javascript:
Máy tính bỏ túi
Bây giờ chúng ta thiết kế bố cục cho trang web với HTML và CSS. Để dễ hình dung các bạn xem hai đoạn code dưới đây nhé!
Thêm vào may_tinh.html:
Thêm vào may_tinh.css:
body{
font-family: Roboto;
background: #373B44;
background: -webkit-linear-gradient[to right, #4286f4, #373B44];
background: linear-gradient[to right, #4286f4, #373B44];
}
#may_tinh{
width:320px;
height:520px;
background-color: #eaedef;
top:20px;
margin:0 auto;
position:relative;
border-radius: 5px;
box-shadow: 0 4px 8px rgba[0, 0, 0, 0.2];
}
#ket_qua{
height: 120px;
}
#ket_qua_cu{
text-align: right;
height:20px;
margin:0 20px;
padding-top:20px;
font-size:15px;
color:#919191;
}
#xuat_ket_qua {
text-align: right;
height:60px;
margin: 10px 20px;
font-size: 30px;
}
#ban_phim{
height: 400px;
}
Kết quả khi chúng ta chèn xong hai đoạn code trên là:
Tiếp Theo chúng ta sẽ thêm những nút bàn phím cho máy tính bỏ túi của chúng ta bằng cách tạo những thẻ HTML trong trang may_tinh.html:
C
CE
%
÷
7
8
9
×
4
5
6
-
1
2
3
+
0
=
Kết quả sau khi nhập xong bàn phím là:
Nhìn chưa được đẹp lắm bây giờ các bạn thêm đoạn code dưới đây vào may_tinh.css để giúp cho máy tính bỏ túi chúng ta sinh động và cuốn hút hơn nào!
.he_thong, .con_so, .trong {
width:50px;
height:50px;
margin: 15px;
float:left;
border-radius: 50%;
border-width: 0;
font-weight:bold;
font-size:16px;
}
.con_so, .trong{
background-color: #eaedef;
}
.he_thong, .con_so{
cursor: pointer;
}
.he_thong:active, .con_so:active {
font-size: 13px;
}
.he_thong:focus, .con_so:focus, .trong:focus{
outline: 0;
}
button:nth-child[4] {
font-size: 20px;
background-color: #20b2aa;
}
button:nth-child[8] {
font-size: 20px;
background-color: #ffa500;
}
button:nth-child[12] {
font-size: 20px;
background-color: #f08080;
}
button:nth-child[16] {
font-size: 20px;
background-color: #7d93e0;
}
button:nth-child[20] {
font-size: 20px;
background-color: #9477af;
}
Và đây là kết quả khi chúng ta chèn đoạn code trên và một số lưu ý nho nhỏ để các bạn có thể nắm được
những CSS quan trọng với đoạn code mình mới thêm:
Thuộc tính width và height để xác định độ rộng và độ cao cho từng nút của bàn phím.
Thuộc tính border-radius: 50% để tạo các nút bàn phím thành những hình tròn như hình bên dưới.
Thuộc tính float:left; giúp xác định vị trí nó sẽ nằm bên trái trong thẻ cha của nó.
button:nth-child[n] là thuộc tính
giúp chúng ta có thể xác định được phần tử con mong muốn thông qua số thứ tự trong danh sách của nó. Và ta muốn là thêm màu với các nút là "/ * - + =" tương ứng với số thứ tự của nó trong nhóm là "4 8 12 16 20"
OK! Bây giờ chúng ta
đã tạm ổn phần giao diện rồi tiếp theo thì hãy cùng mình giúp cái máy tính này có thể hoạt động bằng cách thêm các hàm vào trong may_tinh.js nhé!
Đầu tiên chúng ta cần xác định là phải lấy được giá trị cũ và giá trị xuất sau đó cứ mỗi lần tính toán xong thì sẽ cần một hàm thiết lập các giá trị mới đó vào hai id là gia_tri_cu và gia_tri_xuat thông qua bốn hàm như dưới đây:
function Lay_gia_tri_cu[]{
return document.getElementById["gia_tri_cu"].innerText;
}
function In_gia_tri_cu[so] {
document.getElementById["gia_tri_cu"].innerText = so;
}
function Lay_ket_qua[] {
return document.getElementById["gia_tri_xuat"].innerText;
}
function In_Ket_qua[so] {
document.getElementById["gia_tri_xuat"].innerText = so;
}
Khi các bạn chèn xong thì chúng ta có thể thử gọi hai hàm là In_Ket_qua[9999] và
In_gia_tri_cu[81] để xem thử coi đoạn code của mình hoạt động không nhé!
Một vấn đề là khi ta viết 9999 thì nó sẽ cũng không có dấu phẩy để ngăn cách phần ngàn làm cho người dùng máy tính khó nhìn và dễ bị nhầm lẫn do vậy chúng ta cần code
một hàm giúp định dạng lại số này như hình dưới đây:
function Dinh_dang_chuoi[so] {
var n = Number[so];
var gia_tri = n.toLocaleString["en"];
return gia_tri;
}
Lưu ý là hàm n.toLocaleString["en"] là sẽ chuyển đổi số thành dạng chuỗi theo từng quốc gia mà mình muốn ở đây là thiết lập theo quốc gia US, UK. Để tìm hiểu rõ hơn các bạn có xem tham khảo thông qua trang web //developer.mozilla.org/.Bây giờ chúng ta thử gọi lại
hàm phía trên In_Ket_qua[Dinh_dang_chuoi[9999]], In_gia_tri_cu[Dinh_dang_chuoi[81]] để xem kết quả nhé!
Tiếp theo do kết quả hiển thị là dạng chuỗi nên khi tính toán trong hàm mà chúng ta cần xử lý với số nên ta sẽ tạo ta một hàm giúp đảo ngược
lại định dạng từ chuỗi sang số:
function Xoa_Dinh_dang_chuoi[so] {
return Number[so.replace[/,/g, '']]
}
Chúng ta dùng hàm replace để tìm kiếm dấu "," trong chuỗi và thay thế toàn bộ bằng chuỗi rỗng sau đó ta dùng hàm Number để chuyển kiểu dữ liệu từ chuỗi sang số. Để các bạn có thể nắm rõ từng bước và không bị rối thì mình sẽ cho các bạn xem những hàm mà mình đã code được cho tới giờ:
Bây giờ
thì chúng ta tiếp tục làm cho các nút hoạt động khi nhấn vào sẽ hiện thị lên màn hình máy tính. Bằng cách là lựa chọn ra những thành phần chứa class có tên là con_so bằng hàm getElementsByClassName. Sau khi đã có danh sách thì mình sẽ lặp qua tất cả các phần tử con và gán cho nó sự kiện là khi mà nhấn vào nút bàn phím trên máy tính bỏ túi thì id tương ứng với nút đó sẽ được hiện thị trên màn hình máy tính. Để nắm rõ hơn các bạn hãy nhìn đoạn code dưới đây nhé:
var con_so = document.getElementsByClassName['con_so'];
for[var i=0; i