You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.3 KiB
55 lines
1.3 KiB
<template lang="">
|
|
<div class="container">
|
|
<h1>{{title}}</h1>
|
|
<hr>
|
|
<div class="LCD">
|
|
<div class="hours">{{hours}}</div>
|
|
<div>:</div>
|
|
<div class="minutes">{{minutes}}</div>
|
|
<div>:</div>
|
|
<div class="seconds">{{seconds}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DigitalClock",
|
|
data() {
|
|
return{
|
|
title:"Digitalni hodiny",
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0
|
|
}
|
|
},
|
|
methods: {
|
|
setTime(){
|
|
var date = new Date();
|
|
let hours = date.getHours();
|
|
let minutes = date.getMinutes();
|
|
let seconds = date.getSeconds();
|
|
hours = hours <= 9 ? `${hours}`.padStart(2,0) : hours
|
|
minutes = minutes <= 9 ? `${minutes}`.padStart(2,0) : minutes
|
|
seconds = seconds <= 9 ? `${seconds}`.padStart(2,0) : seconds
|
|
this.hours = hours;
|
|
this.minutes = minutes;
|
|
this.seconds = seconds;
|
|
}
|
|
},
|
|
mounted() {
|
|
setInterval(() => {
|
|
this.setTime()
|
|
}, 1000)
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.LCD {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.LCD > div{
|
|
font-size: x-large;
|
|
}
|
|
</style>
|