vue开始计时组件

2022-07-22 12:19:18

如果你需要制作一个开始计时的组件,需要怎么做呢?比如你要从 00:00 开始计时,然后秒数开始叠加,这里我写了一个开始计时的组件,下面是这个组件,你可以直接引入到项目中使用。

<template><divclass="timer"><div ref="startTimer"></div></div></template><script>exportdefault{
    name:'Timer',data(){return{
    timer:"",
    content:"",
    hour:0,
    minutes:0,
    seconds:0}},created(){this.timer=setInterval(this.startTimer,1000);},destroyed(){clearInterval(this.timer);},
    
    methods:{startTimer(){this.seconds+=1;if(this.seconds>=60){this.seconds=0;this.minute=this.minute+1;}if(this.minute>=60){this.minute=0;this.hour=this.hour+1;}this.$refs.startTimer.innerHTML=(this.minutes<10?'0'+this.minutes:this.minutes)+':'+(this.seconds<10?'0'+this.seconds:this.seconds);}}}</script><style></style>
  • 作者:马优晨
  • 原文链接:https://mayouchen.blog.csdn.net/article/details/89449815
    更新时间:2022-07-22 12:19:18