倒计时在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>