118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<template>
|
|
<ul class="vuejs-countdown">
|
|
<li>
|
|
<p class="digit">{{ hours }}</p>
|
|
<p class="text">H</p>
|
|
</li>
|
|
<li>
|
|
<p class="digit">{{ minutes }}</p>
|
|
<p class="text">M</p>
|
|
</li>
|
|
<li>
|
|
<p class="digit">{{ seconds }}</p>
|
|
<p class="text">S</p>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script>
|
|
let interval = null;
|
|
|
|
export default {
|
|
name: 'vuejsCountDown',
|
|
props: {
|
|
deadline: {
|
|
type: String
|
|
},
|
|
end: {
|
|
type: String
|
|
},
|
|
stop: {
|
|
type: Boolean
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
now: new Date,
|
|
date: null,
|
|
diff: 0
|
|
}
|
|
},
|
|
created() {
|
|
interval = setInterval(() => {
|
|
this.now = new Date;
|
|
}, 500);
|
|
},
|
|
computed: {
|
|
twoDigits(value) {
|
|
if ( value.toString().length <= 1 ) {
|
|
return '0'+value.toString()
|
|
}
|
|
else
|
|
{
|
|
return value.toString()
|
|
}
|
|
},
|
|
|
|
seconds() {
|
|
let value = 60 - this.now.getSeconds() - 1
|
|
return value < 10 ? '0' + value.toString() : value.toString()
|
|
},
|
|
|
|
minutes() {
|
|
let value = 60 - this.now.getMinutes() - 1
|
|
return value < 10 ? '0' + value.toString() : value.toString()
|
|
},
|
|
|
|
hours() {
|
|
let value = 24 - this.now.getHours() - 1
|
|
return value < 10 ? '0' + value.toString() : value.toString()
|
|
}
|
|
},
|
|
destroyed() {
|
|
clearInterval(interval);
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.vuejs-countdown {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.vuejs-countdown li {
|
|
display: inline-block;
|
|
margin: 0 8px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.vuejs-countdown li p {
|
|
margin: 0;
|
|
}
|
|
.vuejs-countdown li:after {
|
|
content: ":";
|
|
position: absolute;
|
|
top: 0;
|
|
right: -13px;
|
|
font-size: 1.75rem;
|
|
}
|
|
.vuejs-countdown li:first-of-type {
|
|
margin-left: 0;
|
|
}
|
|
.vuejs-countdown li:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
.vuejs-countdown li:last-of-type:after {
|
|
content: "";
|
|
}
|
|
.vuejs-countdown .digit {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: 0;
|
|
}
|
|
.vuejs-countdown .text {
|
|
text-transform: uppercase;
|
|
margin-bottom: 0;
|
|
font-size: 1rem;
|
|
}
|
|
</style> |