Heim > php教程 > php手册 > jQuery倒计时效果,代码很简洁

jQuery倒计时效果,代码很简洁

WBOY
Freigeben: 2016-06-07 11:38:58
Original
1474 Leute haben es durchsucht

本文以团购网站的倒计时为例,给三件商品赋予了结束时间及2016年春节结束时间。
jQuery倒计时效果,代码很简洁

页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。我们为三件商品分别定义了结束时间戳,即class为“.endtime”属性value值。<br> <ul> <br>     <li> <br>       <img alt="jQuery倒计时效果,代码很简洁" > <br>       美茵儿  2015韩版新款印花夏装 <br>       <p></p> <br>     </li> <br>     <li> <br>       <img alt="jQuery倒计时效果,代码很简洁" > <br>       阿米路2015夏装新款两件套 <br>       <p></p> </li> <br>      <li> <br>        <img alt="jQuery倒计时效果,代码很简洁" > <br>       映帘2015春装女装新款 韩版 <br>        <p></p> <br>      </li> <br> </ul> <br> jQuery<br> 每个商品定时100毫秒执行一次setInterval里面的代码。接着each()方法遍历计算每个商品的倒计时,单位为天、小时、分、秒。<br> var time_current = (new Date()).valueOf(); //获取当前时间 <br> $(function() { <br>     var dateTime = new Date(); <br>     var difference = dateTime.getTime() - time_current; <br>  <br>     setInterval(function() { <br>         $(".endtime").each(function() { <br>             var obj = $(this); <br>             var endTime = new Date(parseInt(obj.attr('value')) * 1000); <br>             var nowTime = new Date(); <br>             var nMS = endTime.getTime() - nowTime.getTime() + difference; <br>             var myD = Math.floor(nMS / (1000 * 60 * 60 * 24)); <br>             var myH = Math.floor(nMS / (1000 * 60 * 60)) % 24; <br>             var myM = Math.floor(nMS / (1000 * 60)) % 60; <br>             var myS = Math.floor(nMS / 1000) % 60; <br>             var myMS = Math.floor(nMS / 100) % 10; <br>             if (myD >= 0) { <br>                 var str = myD + "天" + myH + "小时" + myM + "分" + myS + "." + myMS + "秒"; <br>             } else { <br>                 var str = "已结束!"; <br>             } <br>             obj.html(str); <br>         }); <br>     }, <br>     100); <br> });查看该特效演示及免费下载,请访问http://www.sucaihuo.com/js/36.html

AD:真正免费,域名+虚机+企业邮箱=0元

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage