Last active
January 17, 2019 05:06
-
-
Save jrran90/cb5382756e24397792229672a837034f to your computer and use it in GitHub Desktop.
Create a countdown timer using VueJS 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<CountdownTimer date="2019/02/20"></CountdownTimer> | |
</template> | |
<script> | |
import CountdownTimer from './shared/CountdownTimer.vue' | |
export default { | |
components: { | |
CountdownTimer | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Create a filter for 2 digits | |
Vue.filter('two_digits', (value) => { | |
if (value.toString().length <= 1) return '0' + value.toString() | |
return value.toString() | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A simple gist for creating a countdown timer using VueJS 2