You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.1 KiB
91 lines
2.1 KiB
<template>
|
|
<view class="Countdown">
|
|
<view class="time">
|
|
<span class="item">{{day}}</span> 天 <span class="item">{{hour}}</span> 时 <span class="item">{{minute}}</span> 分 <span class="item">{{second}}</span> 秒
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
day: 0,
|
|
hour: 0,
|
|
minute: 0,
|
|
second: 0
|
|
};
|
|
},
|
|
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
value: null
|
|
}
|
|
},
|
|
methods: {
|
|
countTime() {
|
|
var d = 86400000,
|
|
h = 3600000,
|
|
n = 60000,
|
|
end = this.value,
|
|
arr = String(end).split(/\D/);
|
|
arr = arr.map(Number);
|
|
var nowTime = new Date().getTime();
|
|
var endTime = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]).getTime();
|
|
var interval = endTime - nowTime;
|
|
|
|
if (interval < 0) {
|
|
this.setData({
|
|
|
|
}); // this.show = false;
|
|
|
|
/*this.$emit("over");*/
|
|
this.end = false;
|
|
} else {
|
|
var day = Math.floor(interval / d);
|
|
Math.floor(interval -= day * d);
|
|
var hour = Math.floor(interval / h);
|
|
Math.floor(interval -= hour * h);
|
|
var minute = Math.floor(interval / n);
|
|
var second = Math.floor(interval % n / 1000);
|
|
this.day = day;
|
|
this.hour = hour;
|
|
this.minute = minute;
|
|
this.second = second;
|
|
}
|
|
},
|
|
|
|
|
|
setData: function (obj) {
|
|
let that = this;
|
|
let keys = [];
|
|
let val, data;
|
|
Object.keys(obj).forEach(function (key) {
|
|
keys = key.split('.');
|
|
val = obj[key];
|
|
data = that.$data;
|
|
keys.forEach(function (key2, index) {
|
|
if (index + 1 == keys.length) {
|
|
that.$set(data, key2, val);
|
|
} else {
|
|
if (!data[key2]) {
|
|
that.$set(data, key2, {});
|
|
}
|
|
}
|
|
|
|
data = data[key2];
|
|
});
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
setInterval(() => {
|
|
this.countTime();
|
|
}, 1000);
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.Countdown{width:145px;font-size:12px}.Countdown .time .item{display:inline-block}
|
|
</style>
|