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:
Quote
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>'+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:
Quote
<body onload="time()">
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:
Quote
<div id="clock"></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.