Script đồng hồ đơn giản cho blog

Hôm nay ghé qua một vài blog thì vô tình thấy một blog nọ có cái đồng hồ khá đơn giản nhưng mà cũng đẹp mắt. Vậy là mình đã quyết định tìm hiểu cách tạo đồng hồ bằng Javascript và cuối cùng thì cũng có được thành quả. Đây là script lấy giờ từ máy tính của người đọc cho nên thời gian hiển thị không chuẩn cho lắm nhưng được cái đơn giản. Nếu bạn cũng có ý áp dụng nó cho blog của mình thì hãy cùng tìm đọc bài này nào.

DEMO

#Cách thực hiện

Đăng nhập Blogger
Mẫu > Chỉnh sửa HTML
Tìm thẻ </head>

Dán code dưới vào trên thẻ mà bạn vừa tìm

<style type="text/css">
   #clock{color: #5af; font-weight: bold; background:#ecf0f1; text-align: center;}
   #clock:hover{color:#2ecc71}
  </style>
        <script type="text/javascript">
            // Hàm khởi tạo đồng hồ
            function startTime() 
            {
                // Lấy Object ngày hiện tại
                var today = new Date();

                // Giờ, phút, giây, ngày, tháng, năm  hiện tại
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
    var date = today.getDate();
    var month = today.getMonth();
    var year = today.getFullYear();
    
    //xác định xem hôm nay là thứ mấy
    var day = today.getDay();
    var thu = new Array("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");

                // Chuyển đổi sang dạng 01, 02, 03
                m = checkTime(m);
                s = checkTime(s);
    h = checkTime(h);
    date = checkTime(date);
    month = checkTime(month)
    
    
                // Ghi ra trình duyệt
                document.getElementById('clock').innerHTML =thu[day] + " ngày " + date + "/" + month + "/" + year + " ~ "+ h + ":" + m + ":" + s;

                // Dùng hàm setTimeout để thiết lập gọi lại 0.5 giây / lần
                var t = setTimeout(function() {
                    startTime();
                }, 500);
            }

            // Hàm này có tác dụng chuyển những số bé hơn 10 thành dạng 01, 02, 03, ...
            function checkTime(i) 
            {
                if (i &lt; 10) {
                    i = "0" + i;
                }
                return i;
            }
   
        </script>

Tìm thẻ <body
Thay thế thẻ vừa tìm thành <body onload="startTime()"
Lưu mẫu lại
Bây giờ chúng ta cùng xác định vị trí đặt đồng hồ. Đi đến tab Bố cục > Thêm tiện ích > HTML/Javascript
Dán thẻ dưới vào tiện ích mới tạo
```
<div id="clock"/>
```
Lưu lại và xem kết quả.

Script tham khảo từ code.freetuts.net

Comments

UnknownJuly 25, 2015 at 11:11 PM
This comment has been removed by a blog administrator.

Khanh blog

Search This Blog

Script đồng hồ đơn giản cho blog

#Cách thực hiện

Comments

Post a Comment