怎么新建MySQL数据库

发布时间:2022-08-06 作者:admin
阅读:278
这篇文章给大家介绍了“用vue怎样写倒计时按钮,代码是什么”的相关知识,讲解详细,步骤过程清晰,有一定的借鉴学习价值,因此分享给大家做个参考,感兴趣的朋友接下来一起跟随小编看看吧。

实现效果:

1.点击开始按钮启动计时

2.点击重置按钮计时恢复到00:00:00

3.点击暂停按钮暂停计时

Vue代码:

<template>
  <div>
    <div class="timeContainer">{{ time }}</div>
    <a-button style="margin-right: 20px" type="primary" @click="start"
      >开始</a-button
    >
    <a-button style="margin-right: 20px" type="primary" @click="reset"
      >重置</a-button
    >
    <a-button type="primary" @click="end">暂停</a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: null,
      hour: 0,
      minute: 0,
      second: 0,
      time: "00:00:00",
    };
  },
  methods: {
    //开始计时
    start() {
      this.flag = setInterval(() => {
        this.second = this.second + 1;
        if (this.second >= 60) {
          this.second = 0;
          this.minute = this.minute + 1;
        }

        if (this.minute >= 60) {
          this.minute = 0;
          this.hour = this.hour + 1;
        }
        this.time =
          this.complZero(this.hour) +
          ":" +
          this.complZero(this.minute) +
          ":" +
          this.complZero(this.second);
      }, 1000);
    },
    //重新计时
    reset() {
      window.clearInterval(this.flag);
      this.hour = 0;
      this.minute = 0;
      this.second = 0;
      this.time = "00:00:00";
    },
    //暂停计时
    end() {
      this.flag = clearInterval(this.flag);
    },
    //补零
    complZero(n) {
      return n < 10 ? "0" + n : "" + n;
    },
  },
};
</script>
<style>
.timeContainer {
  font-size: 40px;
  margin-bottom: 10px;
}
</style>

到此这篇关于“用vue怎样写倒计时按钮,代码是什么”的文章就介绍到这了,更多相关用vue怎样写倒计时按钮,代码是什么内容,欢迎关注群英网络技术资讯频道,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145