在一個快要下班的時刻，我剛剛完成了一項頗有成就感的工作——大小寫轉(zhuǎn)換器和Chmod計算器的開發(fā)。這兩個工具，就像是我親手培育的兩朵小花，雖然簡單，卻充滿了實用與便捷，讓我感到無比的滿足。
然而，我并沒有停下手中的工作，因為在我的心中，還有一個更加有趣的項目正等待著我去完成。趁著現(xiàn)在還有些許閑暇時光，我決定繼續(xù)我的在線工具系列，這一次，我要創(chuàng)造的是一個高效在線計時器。
我坐在電腦前，雙手輕輕搭在鍵盤上，心中充滿了期待與興奮。這個計時器，我希望它能成為一款既簡潔又強大的頁面版工具，無論用戶身處何地，只要打開瀏覽器，就能立刻享受到它帶來的便捷與高效。它不需要繁瑣的安裝過程，不占用寶貴的電腦資源，只需輕輕一點，就能開啟一段精準(zhǔn)的時間旅程。
我閉上眼睛，想象著這個計時器在用戶手中的模樣：它有著清爽的界面，沒有多余的裝飾，只有最核心的計時功能。無論是忙碌的學(xué)習(xí)時光，還是緊張的工作時刻，亦或是悠閑的日常生活，它都能成為用戶最得力的助手，幫助他們更好地掌控時間，提高效率。
想到這里，我睜開眼，開始將腦海中的構(gòu)思轉(zhuǎn)化為實際的代碼。一行行代碼在我的指尖跳躍，如同跳動的音符，編織出一首關(guān)于時間與效率的樂章。我沉浸在編程的世界里，忘記了時間的流逝，忘記了周圍的一切。每當(dāng)遇到難題，我都會耐心地思考，尋找最優(yōu)的解決方案；每當(dāng)解決一個bug，我都會感到一陣由衷的喜悅，仿佛又向目標(biāo)邁進了一步。
隨著時間的推移，我的高效在線計時器逐漸成形。它有著清晰的時間顯示，靈活的計時設(shè)置，以及貼心的提醒功能。我測試著它的每一個功能，確保它都能穩(wěn)定運行，滿足用戶的需求。當(dāng)我看到屏幕上那個簡潔而強大的計時器時，我的心中充滿了自豪與滿足。
而在這個過程中，我也發(fā)現(xiàn)了一個有趣的現(xiàn)象：每當(dāng)我遠離繁重的工作任務(wù)，專注于自己真正感興趣的項目時，我的效率和狀態(tài)都會達到前所未有的高峰。這種“摸魚”式的工作方式，雖然聽起來有些不務(wù)正業(yè)，但卻讓我找到了創(chuàng)作的樂趣與動力。我意識到，真正的創(chuàng)造力往往源自于內(nèi)心的熱愛與自由，而非外界的壓力與束縛。
于是，我更加珍惜這段能夠自由發(fā)揮的時光，繼續(xù)在我的編程世界里探索與創(chuàng)造。我相信，只要保持這份熱愛與堅持，我一定能夠創(chuàng)造出更多優(yōu)秀的作品，為這個世界帶來更多的便利與美好。
<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>
