日期倒计时

根据给定的结束日期实现“天：时：秒”的倒计时效果

使用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 }

效果如下：

posted on 2019-12-02 17:21 41酱的小草莓阅读(285) 评论(0) 编辑收藏举报

刷新页面返回顶部

41酱的小草莓

导航

公告

日期倒计时