- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
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.
Để 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>)
Ở 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:
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.
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.
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.
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
Bài viết liên quan
Bài viết mới
