倒计时方法一:以s为单位
1、html
<div class="remainingtime time-item"> <span id="day_show"></span> <span id="hour_show"></span> <span id="minute_show"></span> <span id="second_show"></span> <input id="e_time" type="hidden" value="120"> </div>
js
<script type="text/javascript"> //活动倒计时 var intDiff = $('#e_time').val(); intDiff = parseInt(intDiff);//倒计时总秒数量 function timer(intDiff){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (day <= 9) {day = '0' + day;} if (hour <= 9) {hour = '0' + hour;} if (minute <= 9) {minute = '0' + minute;} if (second <= 9) {second = '0' + second;} $('#day_show').html(day+":"); $('#hour_show').html(hour+':'); $('#minute_show').html(minute+':'); $('#second_show').html(second); intDiff--; }, 1000); } $(function(){ timer(intDiff); }); </script>
扩展:多个倒计时
html
<div class="group-des-time" data-time="{$vo.time}">剩余9:00:10</div> <div class="group-des-time" data-time="{$vo.time}">剩余9:00:10</div>
js
$(".group-des-time").each(function(){ var intDiff = parseInt($(this).attr("data-time"));//倒计时总秒数量 var $_this = $(this); timer(intDiff, $_this); }) function timer(intDiff, $_this){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $_this.html("剩余"+hour+":"+minute+":"+second); intDiff--; }, 1000); }
倒计时方法二:以ms为单位
html
<div class="js-time"></div>
js
// 抢购倒计时 function countTime() { //获取开始时间 // var date = new Date(); //// var now = date.getTime(); // var nowDate = new Date(nowTime); // var now = nowDate.getTime(); // //设置截止时间 // var endDate = new Date(endTime); // var end = endDate.getTime(); // //时间差 // var leftTime = end-now; if (leftTime>=0) { var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 hours = checkTime(hours); minutes = checkTime(minutes); seconds = checkTime(seconds); leftTime=leftTime-1000; }else{ console.log("111") $(".item-pop").addClass("fn-hide"); window.clearInterval(ordertimer); ordertimer = null; } //将倒计时赋值到div中 var time = hours + ":" + minutes + ":" + seconds; $(".js-time").html(time); } function checkTime(i) { //将0-9的数字前面加上0,例1变为01 if (i < 10) { i = "0" + i; } return i; }