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

18

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

by PT on 09/01/2012, Lượt xem: 8.145

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,868 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();

Tagged as: ,

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!
Hoc thiet ke web Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

{ 18 comments… read them below or add one }

Ewebvn Thanh rossi 11/01/2012 03:43:47 at 15:43

Sao e làm xong bật lên .thấy ko hiện cái gì cả..ko biết do phần html hay js nữa
Đây .. a xem e sai chỗ nào ah



function clock(){

//constructor variable timer

	var timer = new Date();

	//bien hour

	var hour = timer.getHours();

	//bien minute

	var minute = timer.getMinutes();

	//bien second

	var second = timer.getSeconds();

	//Them so 0 vao dau neu so gio nho hon 10

		if(hour < 10){

			hour = "0" + hour;

		}

		if(minute < 10){

			minute = "0" + minute;

		}

		if(second < 10){

			minute = "0" + minute;

		}

		//hien thoi gian len id clock voi phuong thuc innerHTML

	document.getElementById("clock").innerHTML = hour + " : " minute + " : " + second;

}

setInterval("clock()",1000);

Mà e xem demo thấy file js mẫu có <!– //->> bao quanh cái function clock để làm gì ah ? Hình như đấy là comment mà ??–>

Reply

Ewebvn Peter Tran 11/01/2012 07:59:39 at 19:59

Em sai 2 chỗ:
1: document.getElementById(“clock”).innerHTML = hour + ” : ” minute + ” : ” + second; (Thiếu mất dấu + để nối chuỗi trước biến minute, đây là nguyên nhân chính.
Sửa lại thành:
document.getElementById(“clock”).innerHTML = hour + ” : ” + minute + ” : ” + second;
2, Sửa lại một chút trong đoạn code sau
if(second < 10){
minute = “0″ + minute;
}
Sửa thành:
if(second < 10){
second = “0″ + second ; // Sửa minute thành second
}
3, Đoạn <!– //–> là để ghi chú toàn bộ lệnh Javascript, nếu trình duyệt không hỗ trợ (hoặc không bật) thì trình duyệt sẽ bỏ qua và không thực hiện các lệnh Javascript

Reply

Ewebvn Thanh rossi 11/01/2012 09:17:56 at 21:17

Hixx.. thanks a đã sửa cho e .cái lỗi rất là củ chuối ..mong rằng ewebvn mau ra những tut về js cho người mới học js như bọn e

Reply

Ewebvn Thanh rossi 11/01/2012 09:54:05 at 21:54

Ah cho e hỏi là dùng phương thức nào để in nó ra thẳng hay là để chèn vào trang web thì làm thế nào ạ ?

Reply

Ewebvn Peter Tran 14/01/2012 03:26:30 at 15:26

Em muốn in trực tiếp ra thì sử dụng document.write() nhé
Còn muốn chèn lên web thì chương trình trên là một ví dụ rồi đó, em có thể thay thế thẻ div bằng các thể HTML khác và gán id=”clock” cho nó
VÍ dụ: <span id=”clock”>…, rồi chèn vô trang của em cho hợp lý.

Reply

Ewebvn hinh anh dep 18/01/2012 02:54:05 at 14:54

thích nhất ỡ ewebvn la co demo xem dễ dàng….

hinh anh dep

Reply

Ewebvn huy 14/02/2012 02:58:58 at 14:58

thanks you?

Reply

Ewebvn Ngoc 22/02/2012 03:09:49 at 15:09

Cám ơn anh nhiều heg:D
Học kiểu này rất nhanh hiểu.hj.:d

Reply

Ewebvn Nezo 23/02/2012 04:47:07 at 16:47

function clock() {
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = “AM”;
if (hours > 11) { amOrPm = “PM”; }
if (hours > 12) { hours = hours – 12; }
if (hours == 0) { hours = 12; }
if (minutes <= 9) { minutes = "0" + minutes; }
if (seconds <= 9) { seconds = "0" + seconds; }
document.write("” + hours + “:” + minutes + “:” + seconds + “:” + amOrPm ““)
}

“Em làm như thế mà có sai chỗ nào không anh mà sao nó không hiện lên, giúp em với”

Reply

Ewebvn Peter Tran 23/02/2012 11:13:03 at 23:13

Em sửa lại 2 chỗ như sau:
1, if (hours > 12) { hours = hours – 12; }
thay bằng: if (hours > 12) { hours = hours – 12; }, cái dấu – (màu đỏ) trong code của em không phải là dấu trừ, không hiểu sao em gõ ra vậy.

2, document.write(“” + hours + “:” + minutes + “:” + seconds + “:” + amOrPm ““) sửa thành:
document.write(hours + “:” + minutes + “:” + seconds + “:” + amOrPm)

3, Em phải thực hiện gọi hàm clock() thì mới có thể chạy được

Thân chào em!

Reply

Ewebvn Nezo 24/02/2012 01:13:29 at 01:13

Bước thứ 3 gọi hàm ở chỗ nào anh, e gọi trong cái thẻ body thì mỗi giây nó lại load ra 1 cái đồng hồ

…

Reply

Ewebvn Peter Tran 24/02/2012 01:30:10 at 01:30

Em xem lại bài viết nhé, hoặc Download Demo xuống để xem.
Thân!

Reply

Ewebvn KD 19/03/2012 11:24:28 at 11:24

Anh ơi làm thêm video về kiểm tra dạng đúng của email hay sđt đi. Video rất dễ hiểu. Cảm ơn anh.

Reply

Ewebvn Peter Tran 19/03/2012 08:31:57 at 20:31

Có chứ em, nhưng phải ít hôm nữa.

Reply

Ewebvn hoc thiet ke thoi trang 26/05/2012 03:06:21 at 15:06

hi, minh đã làm được , thanks bạn nhiều

Reply

Ewebvn Vunt 09/06/2012 01:06:33 at 01:06

Thanks Anh! bài viết rất hay cho những người mới học js. Anh cho Em hỏi thêm là Em muốn chèn thêm ngày tháng thì làm thế nào ạ. VD: Thứ hai, ngày 28 tháng 5 năm 2012

Reply

Ewebvn truongnv 12/08/2012 05:26:48 at 05:26

A ơi, hôm nào a tạo 1 cái caculator nhé , e làm 1 số nút chưa làm được.:(

Reply

Ewebvn duonvanminh 12/11/2012 11:53:23 at 23:53

Tuyệt vời ông mặt trời anh ạ, loại đồng hồ thì mình chỉ chèn ảnh khác là được đúng không anh :D

Reply

Leave a Comment

AUTO[F9] TELEX VNI VIQR

Đặt code trong cặp thẻ [code] code của bạn [/code]

Những thắc mắc về lỗi code, ..., vui lòng gửi kèm demo