倒计时功能

倒计时方法一：以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;
    }