IT评测·应用市场-qidao123.com

标题: uni-app 倒计时组件 [打印本页]

---

作者: 天空闲话    时间: 2024-6-21 13:02
标题: uni-app 倒计时组件

1. <template>
2.         <view class="time" :style="justifyLeft">
3.                 <text class="red" v-if="tipText">{{ tipText }}</text>
4.                 <text class="styleAll" v-if="isDay === true">{{ day }}</text>
5.                 <text class="timeTxt red" v-if="dayText">{{ dayText }}</text>
6.                 <text class="styleAll">{{ hour }}</text>
7.                 <text class="timeTxt red" v-if="hourText">{{ hourText }}</text>
8.                 <text class="styleAll">{{ minute }}</text>
9.                 <text class="timeTxt red" v-if="minuteText">{{ minuteText }}</text>
10.                 <text class="styleAll">{{ second }}</text>
11.                 <text class="timeTxt red" v-if="secondText">{{ secondText }}</text>
12.         </view>
13. </template>
15. <script>
16.         export default {
17.                 name: "countDown",
18.                 props: {
19.                         justifyLeft: {
20.                                 type: String,
21.                                 default: ""
22.                         },
23.                         //距离开始提示文字
24.                         tipText: {
25.                                 type: String,
26.                                 default: "倒计时"
27.                         },
28.                         dayText: {
29.                                 type: String,
30.                                 default: "天"
31.                         },
32.                         hourText: {
33.                                 type: String,
34.                                 default: "时"
35.                         },
36.                         minuteText: {
37.                                 type: String,
38.                                 default: "分"
39.                         },
40.                         secondText: {
41.                                 type: String,
42.                                 default: "秒"
43.                         },
44.                         datatime: {
45.                                 type: Number,
46.                                 default: 0
47.                         },
48.                         isDay: {
49.                                 type: Boolean,
50.                                 default: true
51.                         },
52.                         id:{
53.                                 type: String | Number,
54.                                 default: ""
55.                         }
56.                 },
57.                 data: function() {
58.                         return {
59.                                 day: "00",
60.                                 hour: "00",
61.                                 minute: "00",
62.                                 second: "00"
63.                         };
64.                 },
65.                 created: function() {
66.                         this.show_time();
67.                 },
68.                 mounted: function() {},
69.                 methods: {
70.                         show_time: function() {
71.                                 let that = this;
73.                                 function runTime() {
74.                                         //时间函数
75.                                         let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差；
76.                                         let day = 0,
77.                                                 hour = 0,
78.                                                 minute = 0,
79.                                                 second = 0;
80.                                         if (intDiff > 0) {
81.                                                 //转换时间
82.                                                 if (that.isDay === true) {
83.                                                         day = Math.floor(intDiff / (60 * 60 * 24));
84.                                                 } else {
85.                                                         day = 0;
86.                                                 }
87.                                                 hour = Math.floor(intDiff / (60 * 60)) - day * 24;
88.                                                 minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
89.                                                 second =
90.                                                         Math.floor(intDiff) -
91.                                                         day * 24 * 60 * 60 -
92.                                                         hour * 60 * 60 -
93.                                                         minute * 60;
94.                                                 if (hour <= 9) hour = "0" + hour;
95.                                                 if (minute <= 9) minute = "0" + minute;
96.                                                 if (second <= 9) second = "0" + second;
97.                                                 that.day = day;
98.                                                 that.hour = hour;
99.                                                 that.minute = minute;
100.                                                 that.second = second;
101.                                         } else {
102.                                                 that.day = "00";
103.                                                 that.hour = "00";
104.                                                 that.minute = "00";
105.                                                 that.second = "00";
106.                                                 clearInterval(runTime)
107.                                                 uni.$emit('endTime',that.id)
108.                                         }
109.                                 }
110.                                 runTime();
111.                                 setInterval(runTime, 1000);
112.                         }
113.                 }
114.         };
115. </script>
117. <style>
118.         .time{
119.                 display: flex;
120.                 justify-content: center;
121.         }
122.         .red{
123.                 color: #fc4141;
124.                 margin: 0 4rpx;
125.         }
126. </style>

复制代码

剩余
                    <CountDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '" :second-text="' '"
                     :datatime="combinationData.end_time"></CountDown>
                    结束

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4