RSSJavascript

Tạo đồng hồ số với Javascript

Một số bài viết và giới thiệu về JS vừa qua trên EW có thẻ buồn tẻ vì chỉ là kiến thức cơ bản. Hôm nay PT quyết định thay đổi cách thức trình bày các bài viết về Javascript, từ bài viết này trở đi, nội dung các kiến thức về JS sẽ được trình bày theo dạng Chương trình thực tiễn, mỗi bài học EW sẽ hướng dẫn bạn viết một ứng dụng nhỏ với Javascript để bài học được phong phú hơn. Theo đó mỗi bài viết mình sẽ đồng thời đề cập đến các kiến thức liên quan về JS trong chương trình vừa …

Một số bài viết và giới thiệu về JS vừa qua trên EW có thẻ buồn tẻ vì chỉ là kiến thức cơ bản.

Hôm nay PT quyết định thay đổi cách thức trình bày các bài viết về Javascript, từ bài viết này trở đi, nội dung các kiến thức về JS sẽ được trình bày theo dạng Chương trình thực tiễn, mỗi bài học EW sẽ hướng dẫn bạn viết một ứng dụng nhỏ với Javascript để bài học được phong phú hơn.

Theo đó mỗi bài viết mình sẽ đồng thời đề cập đến các kiến thức liên quan về JS trong chương trình vừa thực hiện. Hy vọng với cách viết này bạn sẽ dễ nắm bắt hơn.

Theo dự tính, bài viết này mình định thực hiện dưới dạng Video, nhưng do thời gian không cho phép nên thực hiện dưới dạng Tut, hy vọng bạn ủng hộ.

Để khởi động, hôm nay chúng ta sẽ cùng viết một chương trình hiện thị đồng hồ dạng số trên website với Javascript.

Xem Demo 

 

  Download Demo (5.2 KiB, 1,254 Lượt tải)

 

1, Tạo mã HTML như bên dưới:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Clock with Javascript</title>
	<link href="style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="clock.js"></script>
</head>
<body>
	<div id="clock"></div>
</body>
</html>

Thành phần div id=”clock”  sẽ là nơi đồng hồ được hiện thị, mình sẽ không đề cập đến CSS, bạn hãy tự viết CSS để định dạng cho thành phần này nhé.

2, Tạo file mới và lưu với phần mở rộng .js (clock.js) và lưu cùng thư mục chứa tập tin HTML trên, chúng ta sẽ viết chương trình Javascript trong file này.

Một trong những đặc tính của JS là Hướng đối tượng (Object), trong chương trình này chúng ta sẽ sử dụng đối tượng có sẵn của JS là Date().

Một đối tượng bao gồm một hoặc nhiều phương thức (Hàm), mỗi phương thức sẽ thực hiện một chức năng khác nhau của đối tượng.

Cách gọi phương thức của đối tượng: doituong.phuongThuc();

Chúng ta sẽ viết các lệnh trong file clock.js như sau:

3, Viết hàm clock()

function clock(){
   //Khởi tạo đối tượng timer sử dụng Date Object
   var timer = new Date();
   //Gọi các phương thức của đối tượng timer
   var hour = timer.getHours();  //Lấy giờ hiện tại (giá trị từ 0 - 23)
   var minute = timer.getMinutes();  //Lấy phút hiện tại
   var second = timer.getSeconds();  //Lấy giây  hiện tại
   //Thêm ký tự 0 đằng trước nếu giờ, phút, giây < 10 với câu lệnh điều khiển if
   if(hour < 10) {
       hour = "0" + hour;
   }
   if(minute < 10) {
       minute = "0" + minute;
   }
   if(second < 10) {
       second = "0" + second;
   }
   //Hiện thị thời gian lên thẻ div id="clock" với phương thức innerHTML
   document.getElementById("clock").innerHTML = hour + ":" + minute + ":" + second;
}
//Thực hiện hàm clock theo chu kỳ 1 giây
setInterval("clock()",1000);

Giải thích:

(a): Câu lênh điều khiển if else: cho phép kiểm tra và thực hiện một hay nhiều nhóm lệnh dựa trên kết quả đã kiểm tra, câu lệnh else không nhất thiết phải có.

if(<điều kiện>){
   //Thực hiện Các câu lệnh thỏa điều kiện
}
else {
   //Thực hiện các câu lệnh không thỏa điều kiện
}

(b)  Phương thức  getElementById(“clock”):  sẽ tham chiếu đến thành phần div có id là clock.

(c) Phương thức innerHTML: sẽ thay thế các giá trị của thành phần được tham chiều bằng một giá trị nào đó.

Từ (b) và (c) bạn có thể hiểu như sau:

Tìm thành phần nào trong tài liệu HTML có id là “clock”, thay thế nội dung của thành phần bằng giá trị mới (Ở đây là thời gian chúng ta đã tính toán được).

(d)  Hàm setInterval(‘hàm thực hiện’, Thời gian): sẽ thực hiện một hàm nào đó theo chu kỳ thời gian chỉ ra, thời gian được tính bằng 1/1000s.

Đồng số cứ 1 giây sẽ thay đổi một lần, nên Ở trên ta sử dụng: setInterval(“clock()”,1000);  // 1000 = 1 giây.

Hoàn thành: Bạn hãy lưu lại và chạy file HTML để xem kết quả.

KẾT LUẬN

Trong bài học này chúng ta đã thực hiện các công việc sau:

  1. Cách viết hàm trong Javascript
  2. Khởi tạo đối tượng.
  3. Gọi các phương thức của đối tượng.
  4. Thực hiện câu lện điều khiển if else
  5. Thực hiện toán tử với chuỗi (nối chuỗi).
  6. Tham chiếu với getElementById và innerHTML.
  7. Thực hiện gọi hàm với setInterval();

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu