Hướng dẫn Sử dụng JavaScript để tạo đồng hồ cho website

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,500
Được Like
10,743
Sử dụng JavaScript để tạo đồng hồ cho website

Chắc các bạn đã từng vào những trang web mà thấy có một chiếc đồng hồ nằm ở trên top head hay bên phải, bên trái hoặc ở bất kỳ nơi nào. Vậy đã bao giờ các bạn thắc mắc làm thế nào để có được một chiếc đồng hồ tương tự như vậy không?

Bài viết hôm nay mình sẽ hướng dẫn các bạn cách Tạo đồng hồ cho website bằng JavaScript với đầy đủ ngày giờ và sẽ có “kim” giây chạy theo thời gian thực của máy tính.

dong-ho.jpg

Để tạo được một chiếc đồng hồ bằng JavaScript thì các bạn thực hiện theo những bước như sau:

Bước 1: Chèn đoạn code JavaScript sau vào web của bạn (Tốt nhất chèn trong thẻ <head>)
Mã:
<script type="text/javascript">
function time() {
   var today = new Date();
   var weekday=new Array(7);
   weekday[0]="Sunday";
   weekday[1]="Monday";
   weekday[2]="Tuesday";
   weekday[3]="Wednesday";
   weekday[4]="Thursday";
   weekday[5]="Friday";
   weekday[6]="Saturday";
   var day = weekday[today.getDay()];
   var dd = today.getDate();
   var mm = today.getMonth()+1; //January is 0!
   var yyyy = today.getFullYear();
   var h=today.getHours();
   var m=today.getMinutes();
   var s=today.getSeconds();
   m=checkTime(m);
   s=checkTime(s);
   nowTime = h+":"+m+":"+s;
   if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = day+', '+ dd+'/'+mm+'/'+yyyy;

   tmp='<span class="date">'+today+' | '+nowTime+'</span>';

   document.getElementById("clock").innerHTML=tmp;

   clocktime=setTimeout("time()","1000","JavaScript");
   function checkTime(i)
   {
      if(i<10){
     i="0" + i;
      }
      return i;
   }
}
</script>

Ở trên bạn có thể tùy ý điều chỉnh cách thức hiển thị của chiếc đồng hồ theo ý muốn của bạn bằng cách đảo vị trí các biến có trong chuỗi lấy kết quả.

Bước 2: Tiếp theo bạn tìm đến thẻ <body> của file HTML và thêm như sau:
Mã:
<body onload="time()">

Bước 3: Cuối cùng các bạn muốn chiếc đồng hồ hiện chỗ nào thì thêm một thẻ HTML với id =”clock” ở vị trí mà bạn muốn hiển thị. Ở đây mình dùng thẻ <div> còn các bạn muốn dùng thẻ khác cũng được.
Mã:
<div id="clock"></div>

Như vậy là chúng ta đã tạo được một chiếc đồng hồ cho web bằng JavaScript đơn giản nhưng rất hiệu quả. Hy vọng sẽ giúp ích nhiều cho các bạn.

Chúc các bạn thành công.


Nguồn: tuhocphp.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom