Tạo đồng hồ ở Widget cho Xenforo

  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi

PVS

Super Moderator
Thành viên BQT
Tạo đồng hồ ở Widget cho Xenforo

1.png


2.png

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;
}
.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;
}
#point {
    position: relative;
    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;
}
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 trên thẻ </head> trong PAGE_CONTAINER
Mã:
<script type="text/javascript">
$(document).ready(function() {
// Tao 2 mang chua ten ngay thang
var monthNames = [ "/01/", "/02/", "/03/", "/04/", "/05/", "/06/", "/07/", "/08/", "/09/", "/10/", "/11/", "/12/" ];
var dayNames= ["Chủ Nhật","Thứ Hai","Thứ Ba","Thứ Tư","Thứ Năm","Thứ Sáu","Thứ Bảy"]
// Tao moi doi tuong Date()
var newDate = new Date();
// Lay gia tri thoi gian hien tai
newDate.setDate(newDate.getDate());
// Xuat ngay thang, nam
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval( function() {
    // lay gia tri giay trong doi tuong Date()
    var seconds = new Date().getSeconds();
    // Chen so 0 vao dang truoc gia tri giay
    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    },1000);
setInterval( function() {
    // Tuong tu lay gia tri phut
    var minutes = new Date().getMinutes();
    // Chen so 0 vao dang truoc gia tri phut neu gia tri hien tai nho hon 10
    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
setInterval( function() {
    // Lay gia tri gio hien tai
    var hours = new Date().getHours();
    // Chen so 0 vao truoc gia tri gio neu gia tri nho hon 10
    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
});
</script>

Chúc các bạn thành công.


Nguồn: htcviet.net​
 
Widget mà là widget nào ợ, Clear Sibar hả, hay là tạo Widget mới ạ
e là newbie xin a chỉ dáo
 
  • Like
Reactions: THB
Back
Top