wap页活动倒计时

1.活动倒计时

2.商品倒计时（定时更换图片及位置）

html:

<div id="timer">
    <div id="t_status"></div>
</div>
<div id="goods" style="height: 41.52rem;"></div>

css:

<style>
    #goods ul li img,#timer{width:10rem}
    #t_status li{color:#fff;text-align:center}
    #timer{height:3.387rem;background:url(time_bg.jpg) no-repeat;background-size:10rem 3.387rem;position:relative}
    #t_status{width:8.24rem;height:1.867rem;background-size:8.24rem 1.867rem;position:absolute;top:.587rem;left:.827rem}
    #t_status li{width:.427rem;height:.613rem;font-size:.48rem;line-height:.613rem;position:absolute;top:.92rem}
    #cnDay{left:.773rem}
    #cnHourOne{left:1.813rem}
    #cnHourTwo{left:2.253rem}
    #cnMinuteOne{left:3.653rem}
    #cnMinuteTwo{left:4.093rem}
    #cnSecondOne{left:5.107rem}
    #cnSecondTwo{left:5.547rem}
    #halfofftitle{display:block;width:10rem;height:.907rem;font-size:.64rem;line-height:.907rem;text-align:center;font-weight:600;color:#333;position:absolute;top:1.547rem}
</style>

js:

<script>
    $(function(){
        var cd = new Countdown();
        cd.init();
        setInterval(function () {
            var tNow = new Date();
            var tMinutes = tNow.getMinutes();
            var tSeconds = tNow.getSeconds();
            if(tMinutes==0 && tSeconds==0){
                cd.init();
            }
        },1000);
    });
    var Countdown = function(){
        this.deadline = 1476633600000;//new Date("2016-10-17 00:00:00").getTime();   //活动截止时间
        this.beginTime = 1476460800000;//new Date("2016-10-15 00:00:00").getTime();
        this.goodsBegintime = 1476496800000;//new Date("2016-10-15 10:00:00").getTime();   //商品活动开始时间
        this.goodsDeadline = 1476500400000;//new Date("2016-10-15 11:00:00").getTime();   //商品活动截止时间
        this.status = -1; //活动状态 -1--未开始 0--正在进行 1--活动结束
        this.goodStatus = -1; //商品活动状态 -1--未开始 0--正在进行 1--活动结束
    };
    Countdown.prototype = {
        init: function(){
            //获取当前时间，判断活动状态
            this.getStaus();
        },
        getStaus: function(){
            var _this = this;
            var now = new Date().getTime();
            if(now<_this.beginTime){
                //未开始
                _this.status = -1;
                _this.goodStatus = -1;
                _this.setBanner(_this.status);
                _this.goodsDisplay(_this.goodStatus);
            }else if(now>=_this.beginTime&&now<_this.deadline){
                //活动进行中
                _this.status = 0;
                _this.setBanner(_this.status);
                //倒计时显示功能
                _this.setCountnum();
                if(now<=_this.goodsDeadline&&now>=_this.goodsBegintime){
                    _this.goodStatus = 0;
                }else if(now>=_this.goodsDeadline){
                    _this.goodStatus = 1;
                }else{
                    _this.goodStatus = -1;
                }
                _this.goodsDisplay(_this.goodStatus);
            }else{
                //活动结束
                _this.status = 1;
                _this.goodStatus = 1;
                _this.setBanner(_this.status);
                _this.setTimeNum('00000000');
                _this.goodsDisplay(_this.goodStatus);
            }
        },
        setBanner: function(a){
            if(a==-1){
                $('#t_status').css("background-image",'url('+'"'+'will.png'+'"'+')');
            }else{
                $('#t_status').css("background-image",'url('+'"'+'timing_bg.png'+'"'+')');
                $('#t_status').html('<ul id='+'"'+'ts_ul'+'"'+'><li id='+'"'+'cnDay'+'"'+'></li><li id='+'"'+'cnHourOne'+'"'+'></li><li id='+'"'+'cnHourTwo'+'"'+'></li><li id='+'"'+'cnMinuteOne'+'"'+'></li><li id='+'"'+'cnMinuteTwo'+'"'+'></li><li id='+'"'+'cnSecondOne'+'"'+'></li><li id='+'"'+'cnSecondTwo'+'"'+'></li></ul>');
            }
        },
        setTimeNum: function(a){
            $('#cnDay').html(a.charAt(0));
            $('#cnHourOne').html(a.charAt(1));
            $('#cnHourTwo').html(a.charAt(2));
            $('#cnMinuteOne').html(a.charAt(3));
            $('#cnMinuteTwo').html(a.charAt(4));
            $('#cnSecondOne').html(a.charAt(5));
            $('#cnSecondTwo').html(a.charAt(6));
        },
        goodsDisplay: function(a){
            switch(a){
                case -1:
                    $('#goods').html('<ul><li style='+'"'+'position:relative;'+'"'+'><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_1.jpg'+'"'+'/><span id='+'"'+'halfofftitle'+'"'+'>10月15日&nbsp;&nbsp;早10点准时开抢</span></a></li><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_2.jpg'+'"'+'/></a></li><li><a href='+'"'+'#'+'"'+'><img src="img/product_3.jpg'+'"'+'/></a></li></ul>');
                    break;
                case 0:
                    $('#goods').html('<ul><li style='+'"'+'position:relative;'+'"'+'><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_1.jpg'+'"'+'/><span id='+'"'+'halfofftitle'+'"'+'>净化空气&nbsp;&nbsp;离心静音</span></a></li><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_2.jpg'+'"'+'/></a></li><li><a href='+'"'+'#'+'"'+'><img src="img/product_3.jpg'+'"'+'/></a></li></ul>');
                    break;
                case 1:
                    $('#goods').html('<ul><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_3.jpg'+'"'+'/></a></li><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_2.jpg'+'"'+'/></a></li><li><img src='+'"'+'img/product_1_over.jpg'+'"'+'/></li></ul>');
                    break;
            }
        },
        setCountnum: function(){
            var _this = this;
            var now = new Date().getTime();
            var mss = parseInt((_this.deadline - now)/1000);    //取整
            function down(){
                mss--;
                if(mss>0){
                    //得到内容
                    seconds = mss%60+'';
                    minutes = Math.floor((mss%(60*60))/60)+'';
                    hours = Math.floor((mss%(60*60*24))/(60*60))+'';
                    days = Math.floor(mss/(60*60*24))+'';
                    //console.log(days+'-'+hours+'-'+minutes+'-'+seconds);
                    //写入内容
                    s = seconds.length<2 ? '0'+seconds : seconds;
                    m = minutes.length<2 ? '0'+minutes : minutes;
                    h = hours.length<2 ? '0'+hours : hours;
                    mytime = days+h+m+s;
                    _this.setTimeNum(mytime);
                }}
            down();
            setInterval(down,1000);
        }
    };

</script>

图片素材地址：https://pan.baidu.com/s/1eR8PdD4

页面初始化JS：https://pan.baidu.com/s/1bpNy7W7