Hướng dẫn làm web đếm ngược Tết

Đăng ngày 31/12/2017

//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/(10006060))%24);
txtdays=Math.floor(t/(10006060*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/saptet.jpg”);
break;
}
}},1000);}
setClock();
//$(“.clock”).hover(function(){$(this).toggleClass(‘colorlight’);});
});