jQuery Rolodex-倒计时插件

JQUERY教程手机阅读

源码下载  在线演示
今天向大家分享一款倒计时插件，我们经常看见发布某个产品倒计时，给用户一个良好的体验。我相信你会喜欢这插件，并运用到你的网站项目中。
Core HTML Layout
<div id="clock-ticker" class="clearfix"> <div class="block"> <span class="flip-top" id="numdays">8</span> <span class="flip-btm"></span> <footer class="label">Days</footer> </div>   <div class="block"> <span class="flip-top" id="numhours">14</span> <span class="flip-btm"></span> <footer class="label">Hours</footer> </div>   <div class="block"> <span class="flip-top" id="nummins">34</span> <span class="flip-btm"></span> <footer class="label">Mins</footer> </div>
CSS
#clock-ticker { display: block; margin-bottom: 15px;}#clock-ticker .block { position: relative; color: #fff; font-weight: bold; float: left; margin-right: 22px; } #clock-ticker .block .flip-top { width: 88px; height: 39px; line-height: 75px; font-size: 55px; background: url('img/flip-top.png') no-repeat; text-align: center; }#clock-ticker .block .flip-btm { width: 88px; height: 40px; background: url('img/flip-btm.png') no-repeat; text-align: center; } #clock-ticker .block .label { color: #fbfbfb; font-weight: bold; font-size: 14px; text-transform: uppercase; width: 88px; line-height: 35px; text-align: center; font-family: "Calibri", Arial, sans-serif; text-shadow: 1px 1px 0px #333; }
script
<script type="text/javascript">$(document).ready(function(){ var theDaysBox = $("#numdays"); var theHoursBox = $("#numhours"); var theMinsBox = $("#nummins"); var theSecsBox = $("#numsecs");   var refreshId = setInterval(function() { var currentSeconds = theSecsBox.text(); var currentMins = theMinsBox.text(); var currentHours = theHoursBox.text(); var currentDays = theDaysBox.text();   if(currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) { // if everything rusn out our timer is done!! // do some exciting code in here when your countdown timer finishes   } else if(currentSeconds == 0 && currentMins == 0 && currentHours == 0) { // if the seconds and minutes and hours run out we subtract 1 day theDaysBox.html(currentDays-1); theHoursBox.html("23"); theMinsBox.html("59"); theSecsBox.html("59"); } else if(currentSeconds == 0 && currentMins == 0) { // if the seconds and minutes run out we need to subtract 1 hour theHoursBox.html(currentHours-1); theMinsBox.html("59"); theSecsBox.html("59"); } else if(currentSeconds == 0) { // if the seconds run out we need to subtract 1 minute theMinsBox.html(currentMins-1); theSecsBox.html("59"); } else { theSecsBox.html(currentSeconds-1); } }, 1000);});</script>

【jQuery Rolodex-倒计时插件】相关文章

1. Bootstrap3，JQuery倒计时插件和Animate.css生成的倒计时效果

2. jQuery Rolodex-倒计时插件

3. jQuery圆形倒计时插件：ClassyCountdown

4. jQuery Countdown Timer 倒计时效果

5. jQuery 制作逼真的日历翻转效果的倒计时

6. 分享一款页面视差滚动切换jquery.localscroll插件

7. Visual Studio 的 Node.js 插件Node.js Tools 1.0发布

8. explodi

9. Solitaire Colors

10. [JQuery]ScrollMe滚动特效插件

本文来源：https://www.51html5.com/a1218.html