<template>
  <div class="timer">
    <p>{{ formatTime }}</p>
    <button @click="startTimer" v-if="!isTiming">开始计时</button>
    <button @click="stopTimer" v-else>停止计时</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isTiming: false,
      time: 0,
      timer: null
    }
  },
  computed: {
    formatTime() {
      const minutes = Math.floor(this.time / 60)
      const seconds = this.time % 60
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    }
  },
  methods: {
    startTimer() {
      this.isTiming = true
      this.timer = setInterval(() => {
        this.time++
      }, 1000)
    },
    stopTimer() {
      this.isTiming = false
      clearInterval(this.timer)
    }
  }
}
</script>
 
<style>
.timer {
  text-align: center;
  font-size: 24px;
  margin-top: 50px;
}
</style>在Uni-app中实现计时器效果
蜕变菜鸟2024-08-27 17:46
相关推荐
IT_陈寒几秒前
Vue 3性能优化实战:这5个Composition API技巧让你的应用快30%IT_陈寒8 分钟前
Vue3性能翻倍的5个秘密:从Composition API到Tree Shaking实战指南2501_9160074713 分钟前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS AppIT_陈寒22 分钟前
JavaScript 性能优化:3个V8引擎隐藏技巧让你的代码提速50%iOS阿玮25 分钟前
请及时同意苹果开发者协议,避免影响迭代工作。沐怡旸37 分钟前
【技术选型】前端框架:Vue vs React - 组合式API与Hooks的哲学之争charlie1145141911 小时前
HTML 理论系统笔记22501_938780281 小时前
Ionic + Angular 跨端实战:用 Capacitor 实现相机拍照功能并适配移动端00后程序员张1 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战m0_64880493_江哥1 小时前
Python实现随机选播视频的示例代码