uni-app有偿修改一个计时器页面

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app有偿修改一个计时器页面

从一个页面复制到另一个页面有偿QQ3146256280

1 回复

当然,理解你的需求。以下是一个简单的uni-app计时器页面的示例代码,你可以根据具体需求进行修改。这个示例展示了如何创建一个基本的计时器页面,包括开始、停止和重置功能。

首先,创建一个新的uni-app项目(假设你已经安装了HBuilderX或者其他支持uni-app的开发工具)。

1. 修改pages/index/index.vue

<template>
  <view class="container">
    <text>{{ time }}</text>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: '00:00:00',
      timer: null,
      startTime: null,
      elapsedTime: 0
    };
  },
  methods: {
    startTimer() {
      if (this.timer) clearInterval(this.timer); // 防止重复启动
      this.startTime = new Date().getTime();
      this.timer = setInterval(() => {
        this.elapsedTime += 1000; // 每秒增加1000毫秒
        this.updateTime();
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
    resetTimer() {
      this.stopTimer();
      this.time = '00:00:00';
      this.elapsedTime = 0;
    },
    updateTime() {
      let totalSeconds = Math.floor(this.elapsedTime / 1000);
      let hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
      let minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
      let seconds = String(totalSeconds % 60).padStart(2, '0');
      this.time = `${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
</style>

2. 运行项目

将上述代码保存后,使用HBuilderX或者其他开发工具运行项目。你应该会看到一个简单的计时器页面,上面显示当前时间,并有开始、停止和重置按钮。

注意事项

  • 这个示例代码是一个基础实现,没有处理页面生命周期或复杂的用户交互。
  • 根据具体需求,你可能需要添加更多的功能和样式,比如暂停功能、后台计时、持久化存储等。
  • 在实际项目中,请确保进行充分的测试,特别是在不同设备和浏览器上的兼容性测试。

希望这个示例代码能帮助你快速启动计时器页面的开发!

回到顶部