reset and begin
11/24/2011

Code đếm Ngược thời gian jquery

Để đếm lùi đến 1 sự kiện sắp xảy việc hiển thị thời gian thông báo  trên trang web sẽ dễ dàng hơn với jquery

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
vd  2012/1/1 20:60:30
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/

Bloger Comments
G+ Comments
Comments FaceBook

No comments:

List

Profiles Information


About me : Nothing is 1 vài thứ - 1985

Places I've Lived : I Hà Nội

Home Page : http://www.shimivn.blogspot.com/

Think : 1:1000000000

Languages spoken : Vietnamese,English.

Mobile : sony C2305

dell : i3-Ram 3GB- HDD 250GB .