Addon Countdown - Đếm ngược

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
Countdown - Đếm ngược 2.4

Mô tả:
Cung cấp một đồng hồ đếm ngược trên sidebar.

pic001.jpg

Countdown trên sidebar

pic002.jpg

Countdown Admin link

pic003.jpg

Trang Admin

pic004.jpg

User Group Permissions
Tính năng:
  • Dễ dàng để sử dụng trang Admin.
  • Tất cả phrases bắt đầu với countdown_ thuận tiện cho bạn.
Cài đặt:
  1. Download countdown_v2.4.zip ở file đính kèm và giải nén ra.
  2. Upload folder "library" và "js" lên host của bạn ngang hàng thư mục cài Xenforo.
  3. Vào Admin Control Panel, đến trang "Install Add-on".
  4. Upload file addon-Countdown_v2.4.xml.
  5. Click vào nút Install Add-on.
Yêu cầu:
Add-on này đòi hỏi add-on Sidebar Positions: http://vnxf.vn/threads/sidebar-positions-2-4.2168.html

User Group Permissions:
Thông thường user group Administrative được thiết lập là "Allow".

Bảng cơ sở dữ liệu:
Add-on này tạo ra một bảng gọi là xf_countdown trong cơ sở dữ liệu của bạn.

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


Nguồn: xenforo.com​
 

Đính kèm

  • countdown_v2.1.zip
    26 KB · Lượt xem: 134

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
Update phiên bản 2.1
 

vnxf

Thượng Đế
Tham gia
10/09/2015
Bài viết
96
Được Like
7
đang cần cho măn mới
 

SangNTP

Thượng Đế
Tham gia
04/11/2015
Bài viết
156
Được Like
62
Cái này mình set cho nó đếm ngược từ một thời điểm khác được không bạn?
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
được chứ bạn, bạn truy cập vào trang Countdown Admin để vào thêm hoặc chỉnh sửa theo ý bạn
 

vodanhday

Thượng Đế
Tham gia
24/07/2015
Bài viết
18
Được Like
11
mình không thấy cái coutdown admin đấy hiện banj ơi
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
set quyền nó mới hiện nha
 

hayatuan

Thượng Đế
Tham gia
24/07/2015
Bài viết
15
Được Like
10
Sao nó không hiện ra trang chủ or 4rum

help
 
  • Like
Reactions: THB

MacKen

Thượng Đế
Tham gia
30/11/2015
Bài viết
626
Được Like
542
Thật ra add widget html nhanh cho khỏe :)

CODE HTML + JS là xong:)


Mã:
<script type="text/javascript">
year = 2016; month = 2; day = 8;
hour= 0; min= 0; sec= 0;
</script>
<div id="countbox"></div>
<script type="text/javascript">
month= --month;
dateFuture = new Date(year,month,day,hour,min,sec);

function GetCount(){

        dateNow = new Date();                                                         
        amount = dateFuture.getTime() - dateNow.getTime()+5;            
        delete dateNow;

        // time is already past
        if(amount < 0){
                out=
                "<h3 class='VDN_event'>HAPPY NEW YEAR 2016</h3>" +
                "<div id='days'><span></span>0<div id='days_text'>DAY</div></div>" +
                "<div id='hours'><span></span>0<div id='hours_text'>HOUR</div></div>" +
                "<div id='mins'><span></span>0<div id='mins_text'>MIN</div></div>" +
                "<div id='secs'><span></span>0<div id='secs_text'>SEC</div></div>";
                document.getElementById('countbox').innerHTML=out;    
        }
        // date is still good
        else{
                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

                days=Math.floor(amount/86400);//days
                amount=amount%86400;

                hours=Math.floor(amount/3600);//hours
                amount=amount%3600;

                mins=Math.floor(amount/60);//minutes
                amount=amount%60;

             
                secs=Math.floor(amount);//seconds


                out=
                "<h3 class='VDN_event'>HAPPY NEW YEAR 2016</h3>" +
                "<div id='days'><span></span>" + days +"<div id='days_text'>DAYS</div></div>" +
                "<div id='hours'><span></span>" + hours +"<div id='hours_text'>HOURS</div></div>" +
                "<div id='mins'><span></span>" + mins +"<div id='mins_text'>MINS</div></div>" +
                "<div id='secs'><span></span>" + secs +"<div id='secs_text'>SECS</div></div>";
                document.getElementById('countbox').innerHTML=out;
         

                setTimeout("GetCount()", 1000);
        }
}

window.onload=function(){GetCount();}
</script>

CSS

Mã:
/* -------------- BEGIN COUNTER ---------------------*/

#countbox{
    color: #fff;
    font-family: Myriad Pro,Helvetica,sans-serif;
    font-size: 35px;
    width: 240px;
    height: 75px;
    float: right;
}

.VDN_event
{
    font-size: 15px;
    text-align: center;
    color: red;
    font-weight: 600;
}
#days{
    float: left;
    text-align: center;  
    color: red;
    height: 28px;
    width: 60px;
    z-index:1;
}

        #days_text{
            position: absolute;
            margin-top: -8px;
            height: 13px;
            width: 60px;
            font-size:12px;
        }
  
#hours{  
    float: left;
    text-align: center;
    height: 38px;
    width: 60px;
    z-index:1;
    color:red;
}

        #hours_text{
            position: absolute;
            margin-top: -8px;
            height: 13px;
            width: 60px;
            font-size:12px;
        }

#mins{
    float: left;
    text-align: center;
    height: 38px;
    width: 60px;
        z-index:1;
        color:red;
}

        #mins_text{
            position: absolute;
            margin-top: -8px;
            height: 13px;
            width: 60px;
            font-size:12px;
        }

#secs{
    float: left;
    text-align: center;
    height: 38px;
    width: 60px;
        z-index:1;
        color:red;
}  

        #secs_text{
            position: absolute;
            margin-top: -8px;
            height: 13px;
            width: 60px;
            font-size:12px;
        }

#days span, #hours span, #mins span , #secs span {
    position: absolute;
    display: block;
    height: 38px;
    width: 60px;
}


@media (max-width:1110px)
{
    .Responsive #countbox
    {
        display: none;
    }
}

/* -------------- END COUNTER ---------------------*/

chú ý: <div id="countbox"></div> <<< để ở đâu nó hiện chổ đó
 
Sửa lần cuối:

MacKen

Thượng Đế
Tham gia
30/11/2015
Bài viết
626
Được Like
542
CODE THỜI GIAN HIỆN TẠI:

Mã:
<h3 id="VDN_Clock">
                <div id="clock">Loading...</div>
<script type="text/javascript">
    function refrClock() {
    var d=new Date();
    var s=d.getSeconds();
    var m=d.getMinutes();
    var h=d.getHours();
    var day=d.getDay();
    var date=d.getDate();
    var month=d.getMonth();
    var year=d.getFullYear();
    var days=new Array("Chủ nhật","Thứ hai","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7");
    var months=new Array("1","2","3","4","5","6","7","8","9","10","11","12"); var am_pm;
    if (s<10) {s="0" + s}
    if (m<10) {m="0" + m}
    if (h>12)
    {h-=12;AM_PM = "PM"}
    else {AM_PM="AM"}
    if (h<10) {h="0" + h}
    document.getElementById("clock").innerHTML=days[day] + " Ngày " + date + "/" +months[month] + "/" + year + " Bây giờ là "+ " [" + h + ":" + m + ":" + s + "] " + AM_PM; setTimeout("refrClock()",1000); } refrClock();
</script>
            </h3>


CSS

Mã:
#VDN_Clock
{
    left:0;
    font-size: 10pt;
    color: #f0f7fc;
    padding: 0 10px;
    position: absolute;
    bottom: -38px;
    z-index: 1;
    line-height: 38px;
}

@media (max-width: 480px)
{
    #VDN_Clock{display:none;}
}
 

TD2308

Thượng Đế
Tham gia
17/03/2016
Bài viết
151
Được Like
116
add-on đồng hồ đếm ngược này có làm nặng trang hay tốn tài nguyên gì không các bác?
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
mình nghĩ là không, vì thấy nó cũng chả chiếm bao nhiêu dung lượng :)
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
Update phiên bản 2.2
 

Đính kèm

  • countdown_v2.2.zip
    7.7 KB · Lượt xem: 3
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
Update phiên bản 2.3
 

Đính kèm

  • countdown_v2.3.zip
    26 KB · Lượt xem: 5
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,509
Được Like
10,757
Update phiên bản 2.4
 

Đính kèm

  • countdown_v2.4.zip
    26 KB · Lượt xem: 7
  • Like
Reactions: THB

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom