商品促销倒计时效果实现

###效果图展示

所有的知识点总结如下：

• 轮播图实现：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;
}