Update analog-clock.vue
This commit is contained in:
parent
d50e99c17b
commit
6169acd478
@ -45,7 +45,7 @@ export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
now: new Date(),
|
||||
clock: null,
|
||||
enabled: true,
|
||||
|
||||
graduationsPadding: 0.5,
|
||||
handsPadding: 1,
|
||||
@ -74,6 +74,9 @@ export default Vue.extend({
|
||||
return themeColor;
|
||||
},
|
||||
|
||||
ms(): number {
|
||||
return this.now.getMilliseconds();
|
||||
}
|
||||
s(): number {
|
||||
return this.now.getSeconds();
|
||||
},
|
||||
@ -85,13 +88,13 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
hAngle(): number {
|
||||
return Math.PI * (this.h % 12 + this.m / 60) / 6;
|
||||
return Math.PI * (this.h % 12 + (this.m + (this.s + this.ms / 1000) / 60) / 60) / 6;
|
||||
},
|
||||
mAngle(): number {
|
||||
return Math.PI * (this.m + this.s / 60) / 30;
|
||||
return Math.PI * (this.m + (this.s + this.ms / 1000) / 60) / 30;
|
||||
},
|
||||
sAngle(): number {
|
||||
return Math.PI * this.s / 30;
|
||||
return Math.PI * (this.s + this.ms / 1000) / 30;
|
||||
},
|
||||
|
||||
graduations(): any {
|
||||
@ -106,11 +109,17 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.clock = setInterval(this.tick, 1000);
|
||||
const update = () => {
|
||||
if (this.enabled) {
|
||||
this.tick();
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
});
|
||||
update();
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
clearInterval(this.clock);
|
||||
enabled = false;
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
Loading…
Reference in New Issue
Block a user