Skip to content

修改计时小数点后的样式 #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Leonhardt92 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

修改计时小数点后的样式 #195

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfbf777
秒后面加 1 位 0.1 秒计数
Leonhardt92 May 14, 2026
4a6414b
修改计时小数点的样式
Leonhardt92 May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion plugins/ztools-simpletimer/src/TimerWindow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const currentDisplayMs = computed(() => {
})

const displayTime = computed(() => formatTime(currentDisplayMs.value))
const displayTick = computed(() => Math.floor((currentDisplayMs.value % 1000) / 100))
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

currentDisplayMs.value 在正计时模式下（stopwatch）直接取自 elapsedMs.value。如果系统时钟发生回拨，elapsedMs.value 可能会变为负数。虽然 formatTime 函数内部使用了 Math.max(0, ms) 来处理负值，但这里的 displayTick 计算直接使用了原始值。在 JavaScript 中，负数取模的结果仍为负数（例如 -150 % 1000 为 -150），这会导致界面在极端情况下显示出类似 00:00:00.-1 的异常样式。建议在此处也进行边界检查，确保显示的一致性。

const displayTick = computed(() => Math.floor((Math.max(0, currentDisplayMs.value) % 1000) / 100))

const isCountdownLocked = computed(() => mode.value === 'countdown' && isRunning.value)
const isCountdownStartDisabled = computed(() => {
return mode.value === 'countdown' && !isRunning.value && countdownMs.value - elapsedMs.value <= 0
Expand Down Expand Up @@ -569,7 +570,7 @@ function handleBlur() {
</header>

<section class="timer-face" :class="{ 'timer-face-spacious': mode === 'stopwatch' }" aria-label="计时显示">
<output class="timer-display">{{ displayTime }}</output>
<output class="timer-display">{{ displayTime }}<span class="timer-tick">.{{ displayTick }}</span></output>
<div v-if="mode === 'countdown'" class="countdown-track" aria-hidden="true">
<span :style="{ width: `${Math.min(100, Math.max(0, (elapsedMs / Math.max(countdownMs, 1)) * 100))}%` }"></span>
</div>
Expand Down Expand Up @@ -773,6 +774,12 @@ input {
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.timer-tick {
opacity: 0.72;
font-size: calc(22px * var(--timer-scale));
line-height: 1;
vertical-align: baseline;
}

.countdown-track {
width: calc(168px * var(--timer-scale));
Expand Down