B1 chèn link thư viện jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
B2 chèn link mã jquery<script src="http://webvn20.googlecode.com/files/count.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
// ***** thay 2011/01/01 là năm tháng ngày *************************
$('div#clock').countdown("2012/1/1" , function(event) {
var $this = $(this);
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "weeks":
case "daysLeft":
$this.find('span#'+event.type).html(event.value);
break;
case "finished":
$this.hide();
break;
}
});
});
</script>
B3 style cho đếm ngược <style>
#clock{
float:left;
width:400px;
height:50px;
border:1px #000000 solid;
}
.block{
float:left;
height:10px;
width:70px;
}
</style>
B4 hiển thị ở đâu thì thay đổi style và chèn code sau vào <div id="clock">
<div class="block"><span id="weeks"></span> Tuần</div>
<div class="block"><span id="daysLeft"></span> Ngày</div>
<div class="block"><span id="hours"></span> Giờ</div>
<div class="block"><span id="minutes"></span> Phút</div>
<div class="block"><span id="seconds"></span> Giây</div>
<br/> <div> <span >Là Đến Tết</span></div>
</div>
Bonus : để tính toán chính xác ngày giờ phút hay chính xác đến từng giây
ta định dạng thời gian theo các cách sau
- YYYY/MM/DD
- MM/DD/YYYY
- YYYY/MM/DD hh:mm:ss
- MM/DD/YYYY hh:mm:ss
sẽ hiểu là 20h 60' 30'' thay vào code sẽ là
...$('div#clock').countdown("2012/1/1 20:60:30" , function(event) {....
Tham khảo thêm tại http://www.webresourcesdepot.com/wp-content/uploads/file/sooner_or_later/
No comments: