在一个快要下班的时刻，我刚刚完成了一项颇有成就感的工作——大小写转换器和Chmod计算器的开发。这两个工具，就像是我亲手培育的两朵小花，虽然简单，却充满了实用与便捷，让我感到无比的满足。
然而，我并没有停下手中的工作，因为在我的心中，还有一个更加有趣的项目正等待着我去完成。趁着现在还有些许闲暇时光，我决定继续我的在线工具系列，这一次，我要创造的是一个高效在线计时器。
我坐在电脑前，双手轻轻搭在键盘上，心中充满了期待与兴奋。这个计时器，我希望它能成为一款既简洁又强大的页面版工具，无论用户身处何地，只要打开浏览器，就能立刻享受到它带来的便捷与高效。它不需要繁琐的安装过程，不占用宝贵的电脑资源，只需轻轻一点，就能开启一段精准的时间旅程。
我闭上眼睛，想象着这个计时器在用户手中的模样：它有着清爽的界面，没有多余的装饰，只有最核心的计时功能。无论是忙碌的学习时光，还是紧张的工作时刻，亦或是悠闲的日常生活，它都能成为用户最得力的助手，帮助他们更好地掌控时间，提高效率。
想到这里，我睁开眼，开始将脑海中的构思转化为实际的代码。一行行代码在我的指尖跳跃，如同跳动的音符，编织出一首关于时间与效率的乐章。我沉浸在编程的世界里，忘记了时间的流逝，忘记了周围的一切。每当遇到难题，我都会耐心地思考，寻找最优的解决方案；每当解决一个bug，我都会感到一阵由衷的喜悦，仿佛又向目标迈进了一步。
随着时间的推移，我的高效在线计时器逐渐成形。它有着清晰的时间显示，灵活的计时设置，以及贴心的提醒功能。我测试着它的每一个功能，确保它都能稳定运行，满足用户的需求。当我看到屏幕上那个简洁而强大的计时器时，我的心中充满了自豪与满足。
而在这个过程中，我也发现了一个有趣的现象：每当我远离繁重的工作任务，专注于自己真正感兴趣的项目时，我的效率和状态都会达到前所未有的高峰。这种“摸鱼”式的工作方式，虽然听起来有些不务正业，但却让我找到了创作的乐趣与动力。我意识到，真正的创造力往往源自于内心的热爱与自由，而非外界的压力与束缚。
于是，我更加珍惜这段能够自由发挥的时光，继续在我的编程世界里探索与创造。我相信，只要保持这份热爱与坚持，我一定能够创造出更多优秀的作品，为这个世界带来更多的便利与美好。
<template>
<tool-info :tool="tool" :readme="VueComponent">
<template #body>
<c-card shadow="never">
<el-row justify="center" >
<el-col :xs="24" :sm="16" :md="16" align="center">
<el-divider/>
<el-text style="font-size: 50px;"> {{ formatMs(counter) }}</el-text>
<el-divider/>
</el-col>
</el-row>
<el-row justify="center">
<el-col :xs="24" :sm="16" :md="16" align="center">
<el-button v-if="!isRunning" type="primary" @click="resume">{{$t('tools.chronometer.button.start')}}</el-button>
<el-button v-else type="warning" @click="pause">{{$t('tools.chronometer.button.stop')}}</el-button>
<el-button @click="counter = 0">{{$t('tools.chronometer.button.reset')}}</el-button>
</el-col>
</el-row>
</c-card>
</template>
</tool-info>
</template>
<script setup lang="ts">
import { tool } from './index';
import ToolInfo from '@/components/ToolInfo.vue';
import {VueComponent} from './README.md';
import { useRafFn } from '@vueuse/core';
import { ref } from 'vue';
import { formatMs } from './chronometer.service';
const isRunning = ref(false);
const counter = ref(0);
let previousRafDate = Date.now();
const { pause: pauseRaf, resume: resumeRaf } = useRafFn(
() => {
const deltaMs = Date.now() - previousRafDate;
previousRafDate = Date.now();
counter.value += deltaMs;
},
{ immediate: false },
);
function resume() {
previousRafDate = Date.now();
resumeRaf();
isRunning.value = true;
}
function pause() {
pauseRaf();
isRunning.value = false;
}
</script>
