根据给定的结束日期实现“天：时：秒”的倒计时效果
使用uni扩展的countdown插件，加以修改。将模板uni-countdown.vue引入到component中使用：
1 <template> 2 <view> 3 <div v-if="d == '000' && h == '00' && i == '00' && s == '00'" class="m-activity-stop bgfff">活动已结束</div> 4 <div v-else class="m-activity-times bgfff"> 5 距离活动结束还剩： 6 <text class="_span">{{ dd[0] }}</text> 7 <text class="_span">{{ dd[1] }}</text> 8 <text class="_span">{{ dd[2] }}</text> 9 <text class="_i">天</text> 10 <text class="_span">{{ hh[0] }}</text> 11 <text class="_span">{{ hh[1] }}</text> 12 <text class="_i">:</text> 13 <text class="_span">{{ ii[0] }}</text> 14 <text class="_span">{{ ii[1] }}</text> 15 <text class="_i">:</text> 16 <text class="_span">{{ ss[0] }}</text> 17 <text class="_span">{{ ss[1] }}</text> 18 </div> 19 </view> 20 </template> 21 <script> 22 export default { 23 name: 'UniCountdown', 24 props: { 25 day: { 26 type: Number, 27 default: 0 28 }, 29 hour: { 30 type: Number, 31 default: 0 32 }, 33 minute: { 34 type: Number, 35 default: 0 36 }, 37 second: { 38 type: Number, 39 default: 0 40 } 41 }, 42 data() { 43 return { 44 timer: null, 45 syncFlag: false, 46 d: '000', 47 h: '00', 48 i: '00', 49 s: '00', 50 leftTime: 0, 51 seconds: 0, 52 dd:[], 53 hh:[], 54 ii:[], 55 ss:[], 56 }; 57 }, 58 watch: { 59 day(val) { 60 this.changeFlag(); 61 }, 62 hour(val) { 63 this.changeFlag(); 64 }, 65 minute(val) { 66 this.changeFlag(); 67 }, 68 second(val) { 69 this.changeFlag(); 70 } 71 }, 72 created: function(e) { 73 this.startData(); 74 }, 75 beforeDestroy() { 76 clearInterval(this.timer); 77 }, 78 methods: { 79 toSeconds(day, hours, minutes, seconds) { 80 return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds; 81 }, 82 timeUp() { 83 clearInterval(this.timer); 84 this.$emit('timeup'); 85 }, 86 countDown() { 87 let seconds = this.seconds; 88 let [day, hour, minute, second] = [0, 0, 0, 0]; 89 if (seconds > 0) { 90 day = Math.floor(seconds / (60 * 60 * 24)); 91 hour = Math.floor(seconds / (60 * 60)) - day * 24; 92 minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60; 93 second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60; 94 } else { 95 this.timeUp(); 96 } 97 if( day < 100) { 98 day = '0' + day; 99 if (day < 10) { 100 day = '00' + day; 101 } 102 } 103 if (hour < 10) { 104 hour = '0' + hour; 105 } 106 if (minute < 10) { 107 minute = '0' + minute; 108 } 109 if (second < 10) { 110 second = '0' + second; 111 } 112 this.d = day; 113 this.h = hour; 114 this.i = minute; 115 this.s = second; 116 this.dd = this.d.toString().split(''); 117 this.hh = this.h.toString().split(''); 118 this.ii = this.i.toString().split(''); 119 this.ss = this.s.toString().split(''); 120 }, 121 startData() { 122 this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second); 123 if (this.seconds <= 0) { 124 return; 125 } 126 this.countDown(); 127 this.timer = setInterval(() => { 128 this.seconds--; 129 if (this.seconds < 0) { 130 this.timeUp(); 131 return; 132 } 133 this.countDown(); 134 }, 1000); 135 }, 136 changeFlag() { 137 if (!this.syncFlag) { 138 this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second); 139 this.startData(); 140 this.syncFlag = true; 141 } 142 } 143 } 144 }; 145 </script> 146 <style lang="scss"> 147 .m-activity-times, 148 .m-activity-stop { 149 height: 100upx; 150 font-size: 28upx; 151 line-height: 100upx; 152 text-align: center; 153 letter-spacing: 0.2upx; 154 color: #262626; 155 border-bottom: 1px solid #eee; 156 } 157 @media screen and (max-width: 320px) { 158 .m-activity-times { 159 padding-right: 0upx; 160 } 161 } 162 .m-activity-stop { 163 padding: 0upx; 164 text-align: center; 165 color: #8c8c8c; 166 } 167 .m-activity-times span { 168 width: 36upx; 169 height: 54upx; 170 margin-right: 2upx; 171 display: inline-block; 172 font-size: 28upx; 173 line-height: 54upx; 174 text-align: center; 175 color: #fff; 176 background: #1a8cff; 177 border-radius: 4upx; 178 } 179 .m-activity-times i { 180 display: inline-block; 181 margin: 0 6upx 0 4upx; 182 color: #1a8cff; 183 } 184 </style> 185
在页面中直接使用组件，并设置属性day、hour、minute、second初始值为0：
1 <uni-countdown :day="dd" :hour="hh" :minute="mm" :second="ss"></uni-countdown> 2 3 <script> 4 import uniCountdown from '../../component/uni-countdown.vue'; 5 export default { 6 data() { 7 return { 8 today: '', 9 dd: 0, 10 hh: 0, 11 mm: 0, 12 ss: 0, 13 }; 14 }, 15 components: { 16 uniCountdown 17 }, 18 } 19 </script>
写一个函数来计算dd、hh、mm、ss，然后在接口调用成功之后或onLoad()中调用这个函数：
结束日期endtime是通过接口返回的数据；
1 // 转换格式： 年/月/日 时:分:秒 2 const formatSecond = date => { 3 var date = new Date( date ) 4 const year = date.getFullYear() 5 const month = date.getMonth() + 1 6 const day = date.getDate() 7 const hour = date.getHours() 8 const minute = date.getMinutes() 9 const second = date.getSeconds() 10 return [ year, month, day ].map( formatNumber ).join( '/' ) + ' ' + [ hour, minute, second ].map( formatNumber ).join( 11 ':' ) 12 } 13 14 // 获取倒计时时间 15 getTimeCount() { 16 let _this = this; 17 _this.today = _this.formatSecond(new Date()); 18 let msTimes = new Date(_this.Body.endtime).getTime() - new Date(_this.today).getTime(); 19 _this.dd = Math.floor(msTimes / (24 * 3600 * 1000)); 20 let leave1 = msTimes % (24 * 3600 * 1000); 21 _this.hh = Math.floor(leave1 / (3600 * 1000)); 22 let leave2 = leave1 % (3600 * 1000); 23 _this.mm = Math.floor(leave2 / (60 * 1000)); 24 let leave3 = leave2 % (60 * 1000); 25 _this.ss = Math.round(leave3 / 1000); 26 _this.isOvershow = msTimes; 27 }
效果如下：
