Diễn đàn Khám phá khoa học
Chào mừng đến Diễn đàn Khám phá khoa học
Bạn đang là khách viếng thăm. Vì vậy vui lòng đăng nhập hoặc đăng kí để sử dụng diễn đàn được tốt hơn và nhìn thấy được một số nội dung cần thiết

Khi tham gia vào diễn đàn bạn có thể viết bài, trao đổi kinh nghiệm, cùng khám phá với mọi người những điều hay, bổ ích về khoa học...,

Hãy chứng tỏ sự hiểu biết của bạn về Khoa học qua http://khampha.8forum.net


Diễn đànĐăng KíCửa hàng Thành ViênNhómLịch


 
ĐĂNG TIN
Các tin, bài báo thuộc về khoa học, thiên văn,...
 
 
Về các lĩnh vực Tin học, vật lý, toán học, thiên văn.....
 
 
Tài liệu, ebook, đề thi, phần mềm hữu ích, video, ảnh khoa học....
 
Bookmark and Share|

Bộ đếm ngược thời gian tuyệt đẹp bằng javascript

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down
Tác giả
Bình chọn cho bài viết:
Admin
Administrator

avatar


Giới tính : Nam
Số bài gửi Số bài gửi : 388
Coin Coin : 19505
Được cám ơn : 23
Đến từ Đến từ : Việt Nam
Tài sản :

Sun Apr 24, 2011 9:38 am
Bài gửiTiêu đề: Bộ đếm ngược thời gian tuyệt đẹp bằng javascript

1) Chèn Css:
Code:
<style type="text/css">
html {
 background:#222;
 height:100%;
}
body {
 font:normal 76% verdana,tahoma,arial;color:#fff;
}
a {
 color:#99ffff;
}
a:hover {
 color:#ffff00;
}
h1, h2 {
 font:normal 1em georgia,helvetica,arial;
 letter-spacing:-0.5px; /* it isn't web 2.0 otherwise, right? ;) */
}
p {
 margin:0.5em 0px 1.25em 0px;
 padding:0px;
 line-height:1.7em;
}

/*COUNTER SPECIFIC STYLES */
.counter{
   width: 610px;
}
.counter ul.countdown{
   list-style-type: none;
   color: white;
   font-weight: bold;
   text-align: center;
}
.counter ul.countdown li{
   float: left;
   background: url(http://www.javascriptbank.com/javascript/time/Super_Neat_JavaScript_Countdown_Timer/digit.png) no-repeat;
   height:110px;
   width: 105px;
   padding-top: 15px;
}
.counter ul.countdown li div{
   font-size: 15px;
}
.counter ul.countdown li div.countdown_num{
   font-size: 48px;
}
.counter ul.countdown li.no_countdown{
   padding-top:4px;
   background:transparent;
   height:110px;
   width:180px;
}
</style>

2) Chèn vào nơi bạn muốn hiển thị, nhớ điều chỉnh lại thời gian cho phù hợp với yêu cầu của bạn:
Code:
<div id="counter" class="counter">
      <ul class="countdown">
         <li><div class="countdown_num" id="countdown_day"></div><div>Days</div></li>
         <li><div class="countdown_num" id="countdown_hour"></div><div>Hours</div></li>
         <li><div class="countdown_num" id="countdown_min"></div><div>Minutes</div></li>
         <li><div class="countdown_num" id="countdown_sec"></div><div>Seconds</div></li>
      </ul>
   </div>
   <div id="expired" style="display:none;">
      The deadline has passed.
   </div>
<script type="text/javascript">
   /*
      Countdown Timer
      Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)
      Author: (c) 2009 Elbert Bautista
      URL: http://www.egTheBlog.com
      Licence : Open Source MIT Licence

   */
   
   var current="Expired"
   var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

   function countdown(yr,m,d){
      theyear=yr;themonth=m;theday=d
      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[m-1]+" "+d+", "+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(dday==0&&dhour==0&&dmin==0&&dsec==1){
         document.getElementById('counter').style.display='none';
         document.getElementById('expired').style.display='block';
         return
      }
      else{
         document.getElementById('countdown_day').innerHTML=dday;
         document.getElementById('countdown_hour').innerHTML=dhour;
         document.getElementById('countdown_min').innerHTML=dmin;
         document.getElementById('countdown_sec').innerHTML=dsec;
         setTimeout("countdown(theyear,themonth,theday)",1000)
      }
   }

   var deadline=new Date();
   deadline.setDate(deadline.getDate()+5);
   var deadlineYear = deadline.getYear();
   if (deadlineYear < 1000)
   deadlineYear+=1900
   //enter the count down date using the format year/month/day
   countdown(deadlineYear, deadline.getMonth()+1, deadline.getDate());
   </script>

Demo:


Nguồn: javascriptbank.com


__________________________________________________________

Về Đầu Trang Go down
Xem lý lịch thành viên http://www.diendan.khamphakhoahoc.tk

Bộ đếm ngược thời gian tuyệt đẹp bằng javascript

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

Similar topics

+

****************Hãy cùng chia sẻ với bạn bè bằng cách ****************
Copy đường link dưới đây gửi đến nick yahoo bạn bè!

Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Diễn đàn Khám phá khoa học :: Công nghệ thông tin :: Kiến thức :: Thiết kế web-
Diễn đàn Khám phá khoa học - Phát triển bởi các thành viên của diễn đàn.
Admin: Hồ Vũ Thảo Hiền
Liên hệ: Email: hvthhien@gmail.com hoặc info@khamphakhoahoc.tk | Yahoo chat: hvthhien
Ghi rõ nguồn diendan.khamphakhoahoc.tk khi sao chép bài ở đây!
Diễn đàn | Trang tin |Cửa hàng | Thành viên | Lịch | Game ngẫu nhiên | Nghe nhạc | Tìm kiếm | Hỏi đáp
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Sosblogs