封装一个倒计时js---以及vue中使用swiper

一、封装一个倒计时js

 function cd(t1, t2, tg) {
	//相差的毫秒数
	var ms = Date.parse(t1) - Date.parse(t2);
	var minutes = 1000 * 60;
	var hours = minutes * 60;
	var days = hours * 24;
	var years = days * 365;
	//求出天数
	var d = Math.floor(ms / days);
	//求出除开天数，剩余的毫秒数
	ms %= days;
	var h = Math.floor(ms / hours);
	ms %= hours;
	var m = Math.floor(ms / minutes);
	ms %= minutes;
	var s = Math.floor(ms / 1000);
	//返回所需值并退出函数
	switch(tg){
		case 'd' : return d;
		case 'h' : return h;
		case 'm' : return m;
		case 's' : return s;
	}
}
cd('2020/07/31',"2020/07/20",'d')//天
cd('2020/07/31',"2020/07/20",'h')//时
cd('2020/07/31',"2020/07/20",'m')//分
cd('2020/07/31',"2020/07/20",'s')//秒
console.log(cd('2020/07/31',"2020/07/20",'d'))
console.log(cd('2020/07/31',"2020/07/20",'h'))
console.log(cd('2020/07/31',"2020/07/20",'m'))
console.log(cd('2020/07/31',"2020/07/20",'s'))

二、vue中使用swiper，版本和用法如下，避免踩坑

使用版本

	"swiper": "^6.3.5",
	"vue-awesome-swiper": "^3.1.3"

也可以用最新版本

cnpm install swiper vue-awesome-swiper --save

引用

main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

使用

<div class="view-station-dialog__swiper">
 <swiper ref="viewStation" :options="viewStationSwiperOptions">
   <swiper-slide v-for="item in viewStationList" :key="item.title">
     <div v-if="item.videoUrl" @click="playVideo($event)" class="view-station-dialog__video-content">
       <img src="@/assets/images/play.png" v-show="showVideoPlay" class="view-station-dialog__play" alt="" />
       <video :src="item.videoUrl" class="view-station-dialog__video"></video>
     </div>
     <img :src="item.pic" v-else class="view-station-dialog__pic" alt="" />
   </swiper-slide>
   <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
</div>

data(){
return {
			// viewStation列表数据
            viewStationList: [],
			// viewStationSwiper当前展示的ActiveIndex
            viewStationSwiperActiveIndex: 0,
            // viewStationSwiper的配置参数
            viewStationSwiperOptions: {
                slidesPerView: 1, // 显示个数
                direction: 'horizontal',
                touchRatio: 0.5,
                on: {
                    slideChangeTransitionStart: () => {
                        if (this.viewStationSwiper.slides[this.viewStationSwiperActiveIndex].children[0].tagName === 'DIV') {
                        	// 暂停当前活动的video的播放内容
                            const childNode = this.viewStationSwiper.slides[this.viewStationSwiperActiveIndex].children[0]
                            childNode.children[1].pause()
                            // 展示播放按钮
                            this.showVideoPlay = true
                        }
                        this.viewStationSwiperActiveIndex = this.viewStationSwiper.activeIndex
                    }
                },
                pagination: {
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
}
},
computed: {
   viewStationSwiper () {
  		return this.$refs.viewStation.swiper
   }
},
 mounted() {
    this.swiper.slideTo(3, 1000, false)
 }