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.
Bạn đang xem: Hướng dẫn làm website đếm ngược (countdown)
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(){
Xem thêm : Những món ăn không thể thiếu trong Tết Đoan ngọ
//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)
Xem thêm : Lịch nghỉ Tết Nguyên đán 2016 chính thức của học sinh, sinh viên
}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’);}); });
Nguồn: https://vnedulink.edu.vn
Danh mục: Ngày Tết