使用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>
忍一时,越想越气;
退一步,哎呦我去!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通