Hướng dẫn làm website đếm ngược (countdown)

Code đếm ngược Tết Nguyên đán

Chia sẻ với bạn mã nguồn đếm ngược Tết của saptet.com. Code này được mình viết vào ngày cuối cùng của năm dương lịch 2017 (31/12/2017). Bạn tùy ý sử dụng/chia sẻ với mọi mục đích mà không cần xin phép.

Lưu ý bạn KHÔNG copy toàn bộ mã HTML (view-source saptet.com) về server hoặc máy tính để chạy. Trong mã có những đoạn JavaScript mà nếu bạn sử dụng, bên mình có thể tự can thiệp từ xa làm hỏng trang web của bạn (Hiện tại có rất nhiều bạn đang làm như vậy!!!) Nếu bạn muốn hỏi thêm điều gì, xin vui lòng liên hệ, có thời gian mình sẽ giúp. Thân mến.

Với một vài sửa đổi nhỏ, bạn có thể tạo những website đếm ngược khác theo ý tưởng của riêng mình như: Đếm ngược đến Tết dương lịch, đếm ngược ông Công ông Táo, đếm ngược Valentine, đếm ngược Trung thu, đếm ngược Noel… Giới hạn sản phẩm phụ thuộc vào trí tưởng tượng của bạn. Chúc bạn vui vẻ.

//Sử dụng thư viện jQuery để tiết kiệm code

$(document).ready(function(){

//Lưu các Giao thừa (0h:00 ngày mùng 1 Tết) vào 1 mảng, mỗi Tết là 1 object với tên gọi (âm lịch) và thời gian tương ứng

var tet=[
{name:”Mậu Tuất”,
m1:Date.parse(“Feb 16 2018 00:00:00”)},

{name:”Kỷ Hợi”,
m1:Date.parse(“Feb 5 2019 00:00:00”)},

{name:”Canh Tý”,
m1:Date.parse(“Jan 25 2020 00:00:00”)},

{name:”Tân Sửu”,
m1:Date.parse(“Feb 12 2021 00:00:00”)}

];
var tetlength=tet.length;
var setClock=function(){

//Dùng hàm setInterval của JavaScript để chạy mỗi giây 1 lần (sự kiện thời gian). Tham số tính bằng milliseconds, ở đây 1000ms = 1 giây

var timeinterval = setInterval(function(){
var now=new Date();
var timenow=now.getTime();
for(var i=0;i<tetlength;i++){
var m30=tet[i].m1-1000*60*60*24;
var m2=tet[i].m1+1000*60*60*24;
var m4=tet[i].m1+1000*60*60*24*3;

if(timenow<=m4){
var timeend=tet[i].m1;
var istet=false;

var theyear=i+2018;
var txttet=tet[i].name+” “+theyear;

var txttitle=”Đếm ngược đến Tết “+txttet+” – Sắp Tết!”;
var txttetornot=”Sắp Tết rồi!!! Chỉ còn…”;
var txtdays=”Chúc”;
var txthours=”Mừng”;
var txtmins=”Năm”;
var txtsecs=”Mới”;

var txtdaystext=”Ngày”;
var txthourstext=”Giờ”;
var txtminstext=”Phút”;
var txtsecstext=”Giây”;

if(timenow>=tet[i].m1){//m1-m4
//theyear+=1;
timeend=m4;

//Bắt đầu từ mùng 3 là sắp hết Tết

if(timenow>=m2){
txttetornot=”Sắp hết Tết rồi!!!”;

//Tết (từ giao thừa đến hết mùng 2)

}else{//tet
istet=true;
txttetornot=”Tết rồi!!!Tết rồi!!!”;

txtdaystext=”Cung”;
txthourstext=”Chúc”;
txtminstext=”Tân”;
txtsecstext=”Xuân”;

}
}
else{
}
if (!istet){
var t=timeend-timenow;

//Tính thời gian ngày/giờ/phút/giây

txtsecs=Math.floor((t/1000)%60);
txtmins=Math.floor((t/1000/60)%60);
txthours=Math.floor((t/(1000*60*60))%24);
txtdays=Math.floor(t/(1000*60*60*24));
}
$(‘#tetornot’).text(txttetornot);
$(‘#days’).text(txtdays);
$(‘#hours’).text(txthours);
$(‘#mins’).text(txtmins);
//$(‘#mins’).text((‘0’+txtmins).slice(-2));
$(‘#secs’).text(txtsecs);
//$(‘#secs’).text((‘0’+txtsecs).slice(-2));
$(‘#days-text’).text(txtdaystext);
$(‘#hours-text’).text(txthourstext);
$(‘#mins-text’).text(txtminstext);
$(‘#secs-text’).text(txtsecstext);
$(‘#tet’).text(txttet);

//Thêm chút hiệu ứng vui vẻ ngày Tết (từ giao thừa đến mùng 4)

if(timenow>=m30){//30-m4
$(“html”).css(
{“background”:”radial-gradient(ellipse at bottom, #efe81d 0%, #f80f1f 100%)”}
);

$(“.clock”).toggleClass(‘tet’);
$(“.clock .text”).toggleClass(‘tet’);
}

//Điền dữ liệu vào các thẻ HTML meta

document.title=txttitle;
$(‘meta[name=”description”]’)
.attr(“content”, “Còn bao nhiêu ngày nữa đến Tết Nguyên Đán “+txttet+”?”);

$(‘meta[property=”og\\:title”]’)
.attr(“content”, txttitle);

$(‘meta[property=”og\\:description”]’)
.attr(“content”, “Còn bao nhiêu ngày nữa đến Tết Nguyên Đán “+txttet+”?”);

$(‘meta[property=”og\\:image”]’)
.attr(“content”, “https://www.saptet.com/Tulips.jpg”);

break;
}
}},1000);}
setClock();
//$(“.clock”).hover(function(){$(this).toggleClass(‘colorlight’);});
});

Hướng dẫn nhanhCHI TIẾT

Safari trên iPhone/iPad

Nhấn vào biểu tượng Chia sẻ của trình duyệt (phía dưới, ở giữa), chọn Thêm vào MH chính (Add to Home Screen).

Nút Chia sẻ của iPad nằm ở góc trên bên phải.

Chrome trên Android

Nhấn vào menu hình ba chấm dọc của trình duyệt (góc trên bên phải), chọn Thêm vào Màn hình chính (Add to Home screen).