HƯỚNG DẪN TẠO ĐỒNG HỒ CHO WEBSITE BẰNG JAVASCRIPT
Bài viết này sẽ hướng dẫn bạn tạo một chiếc đồng hồ số 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. Chỉ mất 5 phút để tạo ra ứng dụng này.
Để tạo ra ứng dụng này bạn không cần phải biết nhiều về JavaScript, bạn có thể làm theo các bước sau đây:
1/Chèn đoạn JavaScript này vào web của bạn:
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>'+today+' | '+nowTime+'</span>';
document.getElementById("clock").innerHTML=tmp;
clocktime=setTimeout("time()","1000","JavaScript");
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
}
Ở đoạn code trên, tùy vào ý muốn, bạn có thể thay đổi vị trí hiển thị ngày hoặc thời gian bằng cách đảo vị trí các biến có trong chuỗi lấy kết quả.
2/Bước tiếp theo bạn tìm đến thẻ body của file HTML và thêm như sau:
3/Bước này bạn thêm một thẻ HTML với id là “clock” ở vị trí mà bạn muốn hiển thị, với ví dụ này sử dụng thẻ div:
4/Done – vậy là bạn đã có 1 ứng dụng đồng hồ cho website của mình. Bạn có thể tham khảo demo hoặc download về làm theo mẫu. Chúc bạn thành công.
Đỗ Thanh Dương @ 20:27 23/11/2015
Số lượt xem: 1137
- Giao diện trang riêng Violet ngang 990px (09/12/12)
- Code banner trượt 2 bên chào mừng ngày NGVN (06/11/12)
- Code Liên kết thành viên Violet (04/11/12)
- Cờ Việt Nam tung bay trong ... web. (07/10/12)
- Code banner trượt 2 bên web "Vì lợi ích trăm năm trồng cây..." (24/08/12)
Ý kiến trao đổi