標籤：style blog http io ar sp java on div
本執行個體效果：剩餘368天22小時39分57秒結束
代碼簡單易懂，適用各種倒計時；
<!DOCTYPE html><head> <title>jQuery實現倒計時效果-楊秀徐</title> <script type="text/javascript" src="/scripts/jquery.js"></script> <script type="text/javascript"> /* @楊秀徐，首頁 http://www.gzmsg.com @用途：jQuery實現倒計時效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0}) @參數：time: 結束時間,type:顯示方式（0顯示天數，1不顯示天數） */ $.fn.countDown = function (opt) { var opt = $.extend({ time : null, type : 0 }, opt); var edtime = new Date(opt.time).getTime(), //月份是實際月份-1 edsecond = (edtime - new Date().getTime()) / 1000; var eday = $(this).find(‘.day‘), ehour = $(this).find(‘.hour‘), eminute = $(this).find(‘.minute‘), esecond = $(this).find(‘.second‘); var timer = setInterval(function () { if (edsecond > 1) { edsecond -= 1; var day = Math.floor((edsecond / 3600) / 24), hour = Math.floor((edsecond / 3600) % 24), minute = Math.floor((edsecond / 60) % 60), second = Math.floor(edsecond % 60); if(opt.type===0){ $(eday).text(day); //計算天 $(ehour).text(hour < 10 ? "0" + hour : hour); //計算小時 }else{ hour = day * 24; $(ehour).text(hour < 10 ? "0" + hour : hour); //計算小時-沒有天數 } $(eminute).text(minute < 10 ? "0" + minute : minute); //計算分鐘 $(esecond).text(second < 10 ? "0" + second : second); //計算秒殺 } else { clearInterval(timer); } }, 1000); } $(function () { $(".time").countDown({ time: "2015/12/1 10:00:00", type:0 }); }); </script></head><body> <div class="time">剩餘<span class="day">0</span>天<span class="hour">00</span>小時<span class="minute">00</span>分<span class="second">00</span>秒結束</div></body></html>
jQuery實現倒計時效果-楊秀徐
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
