Code đếm ngược từ giờ đến tết nguyên đán 2023

By Phương Cute, 317 View
#TOP
Như những code khác :D code này chỉ sử dụng HTML/CSS/JS thôi ạ.
Demo ảnh: Hổng có nhưng có demo live nhen

Demo mình lưu trên wap4:http://imgill.viwap.com/new-year.html
Chức năng:
Gồm những hức năng y như những code khác là
Có đếm ngược từ giờ đến tết cụ thể đến từng giây :v
Vẫn có popup nhạc như thường lệ
Vẫn có background animate
Chỉ khác biệt là mình làm trên w3.css thôi 2

Cách sử dụng: Chỉ cần download về, upload lên website là nó chạy chứ không cần làm gì cả :3
Đối với nhiều người thì họ thích sử dụng bằng style của họ hơn thay vì sử dụng style có sẵn vì hơi lòe loẹt, thì có thể sử dụng javascript sau:
    function setcountdown(theyear,themonth,theday){ 
yr=theyear;mo=themonth;da=theday 
} 
setcountdown(2023,1,22) 
var occasion="Tết Nguyên Đán 2023" 
var message_on_occasion="Chúc mừng năm mới" 
var countdownwidth='480px' 
var countdownheight='20px' 
var countdownbgcolor='lightblack' 
var opentags='<font face="Verdana">' 
var closetags='</font>' 
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") 
var crosscount='' 
function start_countdown(){ 
if (document.layers) 
document.countdownnsmain.visibility="show" 
else if (document.all||document.getElementById) 
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie 
countdown() 
} 

if (document.all||document.getElementById) 

window.onload=start_countdown 
function countdown(){ 
var today=new Date() 
var todayy=today.getYear() 
if (todayy < 1000) 
todayy+=1900 
var todaym=today.getMonth() 
var todayd=today.getDate() 
var todayh=today.getHours() 
var todaymin=today.getMinutes() 
var todaysec=today.getSeconds() 
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec 
futurestring=montharray[mo-1]+" "+da+", "+yr 
dd=Date.parse(futurestring)-Date.parse(todaystring) 
dday=Math.floor(dd/(60*60*1000*24)*1) 
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) 
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) 
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) 
//if on day of occasion 
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+message_on_occasion+closetags 
return 
} 
//if passed day of occasion 
else if (dday<=-1){ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+" Chúc Mừng Năm Mới "+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+" Chúc Mừng Năm Mới "+closetags 
return 
} 
//else, if not yet 
else{ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML="<p>"+occasion+closetags+"</p> <span class='w3-tag w3-red w3-padding w3-margin'>" +opentags+dday+ " ngày</span> <span class='w3-tag  w3-red w3-margin w3-padding'> "+dhour+" giờ </span> <span class='w3-tag w3-red w3-margin w3-padding'>"+dmin+" phút</span> <p><span class='w3-tag  w3-red w3-padding'> "+dsec+" giây</span></p> "
$('i#dd').html(opentags+dday);  $('#yy').html(todayy);
} 
setTimeout("countdown()",1000) 
} 

và thích nó hiển thị ở đâu thì đặt thẻ này ở đó, có thể trang trí tùy thích:
<p id="countdownie"></p>

có thể thay p bằng span, div, i bla bla tùy ý.

Lưu ý nhỏ nữa là nãy mình đi kiếm mấy cái ảnh để làm hình nền mà hổng ra nên mình có lấy vài tấm ảnh của Trung Quốc để thêm vào (mấy con thỏ ý), nếu không thích những ảnh đó thì thay lại link ảnh.
Done 42
KenBi, Gill, Thanh Tam đã thích bài viết này

0 comments:

  1. Chưa có bình luận nào, hãy là người đầu tiên!