[Tuts] Đồng hồ cực cool cho Xenforo

VIEW DÉMO - Xem trước đở phải đọc tiếp

Các bác làm theo hướng dẫn sau nhé :

1. Chèn html vào Widget

Mã:

<div class="clock">
<div id="Date"></div>
  <ul>
      <li id="hours"></li>
      <li id="point">:</li>
      <li id="min"></li>
      <li id="point">:</li>
      <li id="sec"></li>
  </ul>
</div>

2. Chèn css vào extra.css

Mã:

/*XEN CLOCK */
 
.clock {
   
    margin: 0 auto;
    padding: 3px;
    color: #3399cc;
}
 
#Date {
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    text-shadow: 0 0 5px #00c6ff;
}
 
.clock ul {
 
    margin: 0 auto;
    padding: 0px;
    list-style: none;
    text-align: center;
}
 
.clock ul li {
    display: inline;
    font-size: 3em;
    text-align: center;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    text-shadow: 0 0 5px #00c6ff;
}
 
#point {
    position: relative;
    -moz-animation: mymove 1s ease infinite;
    -webkit-animation: mymove 1s ease infinite;
    padding-left: 10px;
    padding-right: 10px;
}
 
/* Simple Animation */
@-webkit-keyframes mymove {
    0% {opacity: 1.0;
    text-shadow: 0 0 20px #00c6ff;
}
 
50% {
    opacity: 0;
    text-shadow: none;
}
 
 
Sẽ sớm có style đồng hồ cực cool cho a/e
100% {
    opacity: 1.0;
    text-shadow: 0 0 20px #00c6ff;
}   
}
 
@-moz-keyframes mymove {
    0% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }
 
    50% {
        opacity: 0;
        text-shadow: none;
    }
 
    100% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    };
}

3. Chèn Script vào thẻ head trong page_container

Mã:

<script type="text/javascript">
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "/01/", "/02/", "/03/", "/04/", "/05/", "/06/", "/07/", "/08/", "/09/", "/10/", "November", "December" ];
var dayNames= ["Chủ nhật","Thứ Hai","Thứ Ba","Thứ Tư","Thứ Năm","Thứ Sáu","Thứ Bảy"]
 
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year 
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
 
setInterval( function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    },1000);
   
setInterval( function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
   
setInterval( function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);   
});
</script>

 

Tuyệt vời ông mặt trời..

 

Like mạnh cho tuts hay

 

Nhanh gọn nhẹ cả đống kiểu http://www.clocklink.com/gallery.php?category=HTML5

 

Like mạnh len

 

Thank mọi người, chuẩn bị cập nhật style 2

 

uk

 

uk

 

chào soctrang . . . hồi còn ỏ ttvn chắc còn nhớ m. . . .hinh như thêm tem kia site load chậm hơn thi phải ...demo trên #1

 

ko đâu bác ợ, bác có thể kiểm tra trước và sau trong google analytics

 

Mình nhớ có ai diều hành trang oppastyle share cái này rồi ==
Google cả đống ==

 

nếu được thì bác share cái đống của bác. đừng cm những thứ này.

 

Sao mà mình làm thử ko thấy được nhỉ????

 

Sao mà trang demo nó load uyển chuyển trông đẹp thế nhỉ

 

nicescroll @@
mình ghét nó

 

Vào trang của chủ TOP sao mà nó chóng mặt quá

 

Sao ghét bác?. Thêm nicescroll vào như thế nào vậy bác.

 

ko thây được là sao bạn ? nó ko hiện à ?

 

Chắc tại cái nicescroll. E xin cái này về tham khảo

 

trên cùng 4r có cái khung search đó bạn
điền vào nicescroll rồi enter xem ra được cái hì hok @@
hay là cái khung search đó treo lên làm kiểu cho đẹp