使用moment.js写一个倒计时

使用uniapp 直接复制全部代码粘贴到页面就可以使用，确定引入的moment.js文件位置

 

 1 <template>
 2     <view>
 3         <view class="one">
 4             {{starTime}}
 5             <view class="">
 6                 
 7             </view>
 8             {{temporaryTime}}
 9             <view class="">
10                 
11             </view>
12             {{counTime}}
13         </view>
14     </view>
15 </template>
16 
17 <script>
18     import moment from '../../utis/moment.js';                    //引入moment.js
19     var Inter;                                                                                    //设置定时器变量名
20     export default {
21         data() {
22             return {
23                 starTime:"2020-02-02 12:00:00",                                    //开始时间
24                 endTime:"2020-02-02 12:00:00",                                    //结束时间
25                 temporaryTime:"2020-02-02 12:00:00",                        //临时时间
26                 counTime:"00:00:00",                                                        //计算后的时间
27             }
28         },
29         onLoad() {
30         
31         },
32         onShow() {
33             let that = this;
34             that.starTime = moment().format()                                        //获取到的当前时间
35             that.endTime = moment().add(10,'m').format()                //设置一个10分钟后的时间
36             that.temporaryTime = that.endTime                                        //设置一个临时时间
37             Inter = setInterval(function(){                                                            //设置计时器，每一秒调用一次
38                 that.timeArray(that.endTime)
39             },1000)
40         },
41         methods: {
42             timeArray(time){                                                                                                    // 倒计时数组,外边放置一个定时器就可以实现倒计时
43                 let that = this;
44                 
45                 let diff = moment(time, 'YYYY-MM-DD hh:mm:ss').diff(moment(), "seconds");                //对比两个时间差距，获得相差的秒数
46                 
47                 if (diff <= 0) {                                                                //如果两个时间没有差距
48                     clearInterval(Inter)                                                    //清除定时器
49                     that.counTime = "00:00:00"
50                     return "00:00:00";
51                 }
52                 
53                 let days = parseInt(diff / (3600 * 24));                    //根据获得的秒数计算有多少天
54                 diff = diff - days * 3600 * 24;
55                 let hour = parseInt(diff / 3600);                                    //根据获得的秒数计算有多少小时
56                 diff = diff - hour * 3600;
57                 let minute = parseInt(diff / 60);                                    //根据获得的秒数计算有多少分钟
58                 let second = diff - 60 * minute;
59                 
60                 if (days < 10) {
61                     days = "0" + days;
62                 }
63                 
64                 if (hour < 10) {
65                     hour = "0" + hour;
66                 }
67                 
68                 if (minute < 10) {
69                     minute = "0" + minute;
70                 }
71                 
72                 if (second < 10) {
73                     second = "0" + second;
74                 }
75                 
76                 if (days == '00') {
77                     that.counTime = hour + ":" + minute + ":" + second
78                 } else {
79                     that.counTime = days + "天 " + hour + ":" + minute + ":" + second
80                 }
81                 
82             }
83         }
84     }
85 </script>
86 
87 <style>
88 
89 </style>

 

posted @ 2021-05-06 16:19  伊人兮明眸秋水  阅读(771)  评论(0)    收藏  举报