使用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 @   伊人兮明眸秋水  阅读(741)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示