商品促销倒计时效果实现

效果图展示

这里写图片描述

所有的知识点总结如下：

• 轮播图实现：swiper插件
• 倒计时功能的实现
• 倒计时结束，抢购按钮变为可点击状态

轮播图的实现

swiper插件：开源，免费，强大的移动端触摸，滑动插件
用途非常广泛，只要是移动端的触摸，滑动效果都可以用swiper来完成，比如轮播图的制作
使用也非常简单，只需要复制粘贴即可，具体参照官方文档swiper官网

事例代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container', {
    autoplay: 5000,//可选选项，自动滑动
})
</script>

倒计时功能的实现

document.querySelectorAll(".btn").forEach(function (v,i) {
    v.disabled = true;

});
showtime();

function showtime(){
    var nowtime =  new Date();//当前的时间
    var endtime =  new Date("2017/11/11,00:00:00");//设置的倒计时时间
    var timeNum = parseInt((endtime.getTime() - nowtime.getTime()) /1000 )//得到两个时间段的毫秒数差值再除以1000，就是相差的秒数
    var d = parseInt(timeNum / (60*60*24))//得到相差天数
    var h = parseInt(timeNum  / (60*60) %24 )
    var m = parseInt(timeNum / 60 %60 )
    var s = parseInt(timeNum  % 60 )
    h = add(h)
    m = add(m)
    s = add(s)

    document.getElementById("contdown").innerHTML = "距离开抢还有   " + h + ":" + m + ":" + s;
    if(timeNum<=0){
         document.querySelectorAll("button").forEach(function (v,i) {
            v.disabled = false;
        });
         document.getElementById("contdown").innerHTML = "开始抢购！！！";
        return;
    }
      setTimeout(showtime,1000);
}
function add(i){
    if(i<10){
        i = "0"+i;
    }
    return i;
}