|
|
@@ -0,0 +1,53 @@ |
|
|
|
<template> |
|
|
|
<div class="timer"> |
|
|
|
<span v-if="displayHours">{{ hours }}:</span><span v-if="displayMinutes">{{ minutes }}</span><span>:{{ seconds }}</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'Timer', |
|
|
|
data () { |
|
|
|
return { |
|
|
|
currentTime: this.$attrs.initialTime |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
startTimer: function () { |
|
|
|
this.timerIntevalId = setInterval(() => { |
|
|
|
this.currentTime-- |
|
|
|
if (this.currentTime === 0) { |
|
|
|
this.stopTimer() |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
stopTimer: function () { |
|
|
|
clearInterval(this.timerIntevalId) |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
seconds: function () { |
|
|
|
return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2}) |
|
|
|
}, |
|
|
|
minutes: function () { |
|
|
|
return (Math.floor(this.currentTime / 60) % 60) |
|
|
|
}, |
|
|
|
hours: function () { |
|
|
|
return (Math.floor(this.currentTime / 3600) % 24) |
|
|
|
}, |
|
|
|
displayMinutes: function () { |
|
|
|
return this.minutes > 0 || this.hours > 0 |
|
|
|
}, |
|
|
|
displayHours: function () { |
|
|
|
return this.hours > 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
this.startTimer() |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
|
|
</style> |