Skip to content

Instantly share code, notes, and snippets.

@jrran90 jrran90/CountdownTimer.vue
Last active Jan 17, 2019

Embed
What would you like to do?
Create a countdown timer using VueJS 2
<template>
<div>
<div class="the-countdown">
<ul>
<li>
<div>
<span>Days</span>
{{ days | two_digits }}
</div>
</li>
<li>
<div>
<span>Hours</span>
{{ hours | two_digits }}
</div>
</li>
<li>
<div>
<span>Minutes</span>
{{ minutes | two_digits }}
</div>
</li>
<li>
<div>
<span>Seconds</span>
{{ seconds | two_digits }}
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: ['date'],
data() {
return {
now: Math.trunc((new Date().getTime() / 1000))
}
},
computed: {
days() {
let date = Math.trunc(Date.parse(this.date) / 1000)
return Math.trunc((date - this.now) / 60 / 60 / 24)
},
hours() {
let date = Math.trunc(Date.parse(this.date) / 1000)
return Math.trunc((date - this.now) / 60 / 60) % 24
},
minutes() {
let date = Math.trunc(Date.parse(this.date) / 1000)
return Math.trunc((date - this.now) / 60) % 60
},
seconds() {
let date = Math.trunc(Date.parse(this.date) / 1000)
return (date - this.now) % 60
}
},
mounted() {
window.setInterval(() => {
this.now = Math.trunc((new Date().getTime() / 1000))
}, 1000)
},
}
</script>
<style scoped>
.the-countdown {
width: 50%;
margin: 10px auto 0 auto;
font-size: 14px;
line-height: 20px;
text-align: center;
}
.the-countdown strong{
text-transform: uppercase;
letter-spacing: 1px;
}
.the-countdown ul{
margin: 10px -10px -10px -10px;
overflow: auto;
}
.the-countdown ul li{
float: left;
position: relative;
padding: 10px;
width: 25%;
text-align: center;
box-sizing: border-box;
font-size: 60px;
line-height: 60px;
font-weight: 100;
}
.the-countdown ul li:after{
content: ':';
position: absolute;
top: 50%;
margin: -25px 0 0 0;
right: -5px;
color: #98A2AB;
}
.the-countdown ul li:last-child:after{
display: none;
}
.the-countdown ul li div{
background: #EEE;
padding: 20px;
overflow: hidden;
}
.the-countdown ul li:first-child div{
border-radius: 10px 0 0 10px;
}
.the-countdown ul li:last-child div{
border-radius: 0 10px 10px 0;
}
.the-countdown ul li span{
display: block;
font-weight: bold;
color: #FFF;
margin: -20px -20px 20px -20px;
background: #98A2AB;
font-size: 12px;
line-height: 12px;
padding: 10px;
}
</style>
<template>
<CountdownTimer date="2019/02/20"></CountdownTimer>
</template>
<script>
import CountdownTimer from './shared/CountdownTimer.vue'
export default {
components: {
CountdownTimer
}
}
</script>
// Create a filter for 2 digits
Vue.filter('two_digits', (value) => {
if (value.toString().length <= 1) return '0' + value.toString()
return value.toString()
})
@jrran90

This comment has been minimized.

Copy link
Owner Author

commented Jan 16, 2019

A simple gist for creating a countdown timer using VueJS 2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.