<div id="app" class="center">
<div id="time" v-html="time"></div>
<div class="buttons">
<button v-if="!state" @click="resume">Resume</button>
<button v-if="state" @click="pause">Pause</button>
</div>
</div>
body {
background: blueviolet;
}
#time {
color: #fff;
font-size: 140px;
// width: 100%;
// display: block;
text-align: center;
}
#app {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.buttons {
// display: block;
// width: 100%;
text-align: center;
position: absolute;
bottom: 30%;
button {
background-color: darkblue;
border: none;
padding: 14px 34px 10px 34px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
letter-spacing: 4px;
}
}
View Compiled
// Based on https://gist.github.com/motatoes/45e815ff0c83d95710557fdf85af0b8c
new Vue({
el: "#app",
data: {
state: true,
currentTime: Date.now(),
interval: null
},
mounted: function(){
this.interval = setInterval(this.updateCurrentTime, 1000);
},
computed: {
time: function() {
return this.hours + ":" + this.minutes + ":" + this.seconds;
},
milliseconds: function() {
return this.currentTime;
},
hours: function() {
var milli = this.milliseconds;
// Doing the math
// var hrs = Math.floor((milli / 3600000) % 24);
// Using getHours()
var hrs = new Date().getHours();
if (hrs >= 13) { hrs = hrs - 12 }
return hrs >= 10 ? hrs : '0' + hrs;
},
minutes: function() {
var milli = this.milliseconds;
var min = Math.floor((milli / 60000) % 60);
return min >= 10 ? min : '0' + min;
},
seconds: function() {
var milli = this.milliseconds;
var sec = Math.ceil((milli % 60000) / 1000).toFixed(0);
if (sec == 60) { sec = 00 }
return sec >= 10 ? sec : '0' + sec;
}
},
methods: {
reset: function() {
this.state = true;
this.currentTime = Date.now();
},
pause: function() {
this.state = false;
},
resume: function() {
this.state = true;
},
updateCurrentTime: function() {
if (this.state == true) {
this.currentTime = Date.now();
}
}
}
});
This Pen doesn't use any external CSS resources.