倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。
html代码:
<div class="box3 " data-endtime="<?php echo strtotime('2015-12-1');?>" ></div> <div class="box3 " data-endtime="1448928000"></div>
js代码
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var serverTime = <?php echo time();?> * 1000; $(function(){ var dateTime = new Date(); var difference = dateTime.getTime() - serverTime; setInterval(function(){ $("[data-endtime]").each(function(){ var obj = $(this); var endTime = new Date(parseInt(obj.data('endtime')) * 1000); var nowTime = new Date(); var nMS=endTime.getTime() - nowTime.getTime() + difference; var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); var myH=Math.floor(nMS/(1000*60*60)) % 24; var myM=Math.floor(nMS/(1000*60)) % 60; var myS=Math.floor(nMS/1000) % 60; var myMS=Math.floor(nMS/100) % 10; if(myD>= 0){ var str = "开班倒计时:"+myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒"; }else{ var str = "已结束!"; } obj.html(str); }); }, 100); }); </script>