JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery Rolodex-倒计时插件

jQuery Rolodex-倒计时插件


源码下载  在线演示
         今天向大家分享一款倒计时插件,我们经常看见发布某个产品倒计时,给用户一个良好的体验。我相信你会喜欢这插件,并运用到你的网站项目中。
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

点击展开全部

﹝jQuery Rolodex-倒计时插件﹞相关内容

「jQuery Rolodex-倒计时插件」相关专题

其它栏目

也许您还喜欢