AskaEth
9c7081b21d
一个用于演练/演示的桌面时钟工具：两个窗口 —— 控制窗口（普通）与时钟窗口（无边框、 可拖动、可拖边缘改大小，由控制窗口开与关）。 功能 - 两个窗口各自的「始终置顶」开关 - 显示样式：纯数字 / 圆形表盘，切换立即生效 - 实时设定时间（含「填入当前显示时间」） - 倍率：支持正数、负数（倒转）、0（暂停）、小数 - 暂停 / 继续（继续时回到暂停前的倍率，按钮文案会显示是几倍） - 快进五档：+5 秒 / +1 分钟 / +5 分钟 / +10 分钟 / +30 分钟 实现要点 - 走时是「基准时间 + 基准时刻 + 倍率」的锚点式模型（不累加、零漂移）； 倍率、暂停、倒转、快进因此是同一套机制的四个用法，互不打架 - 跳转动画做在「呈现时间」这一层：数字滚动与表盘指针扫动共用同一个中间值， 所以永远同步，也不会跨 12 点倒着转一圈 - 无边框窗口的拖动（CSS app-region + 控件 no-drag）与拖边缘改大小 （自己算几何 + IPC setBounds，因为 frame:false 下系统边缘命中不可靠） 测试 152 例：走时模型 / 改大小几何 / 呈现时间 / 两个渲染进程（DOM 桩）
106 lines
4.3 KiB
HTML
106 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; object-src 'none'" />
|
|
<title>ClockLab 控制台</title>
|
|
<link rel="stylesheet" href="control.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="dot"></span>
|
|
<div>
|
|
<h1>ClockLab 时钟控制台</h1>
|
|
<p class="sub">显示时间 = 基准时间 + 真实经过时间 × 倍率</p>
|
|
</div>
|
|
</div>
|
|
<div class="readout">
|
|
<div id="readoutTime" class="readout-time">--:--:--</div>
|
|
<div id="readoutMeta" class="readout-meta">连接中…</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="grid">
|
|
<section class="card">
|
|
<h2>时钟窗口</h2>
|
|
<div class="row">
|
|
<button id="toggleClockWindow" class="btn btn-primary wide">打开时钟窗口</button>
|
|
</div>
|
|
<div class="row stack-tight">
|
|
<label class="check">
|
|
<input id="aotClock" type="checkbox" checked />
|
|
<span>时钟窗口始终置顶（默认开）</span>
|
|
</label>
|
|
<label class="check">
|
|
<input id="aotControl" type="checkbox" />
|
|
<span>控制窗口始终置顶（默认关）</span>
|
|
</label>
|
|
</div>
|
|
<p class="hint">关掉控制窗口即退出整个程序，时钟窗口一并关闭。</p>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>显示样式</h2>
|
|
<div class="segmented" id="styleGroup">
|
|
<button class="btn seg" data-style="digital">纯数字</button>
|
|
<button class="btn seg" data-style="analog">圆形时钟</button>
|
|
</div>
|
|
<p class="hint">切换立即生效，不需要重开时钟窗口。</p>
|
|
</section>
|
|
|
|
<section class="card wide-card">
|
|
<h2>时间与流速</h2>
|
|
|
|
<div class="field">
|
|
<div class="field-label">设定时间（24 小时制）</div>
|
|
<div class="row">
|
|
<div class="time-inputs">
|
|
<input id="hh" class="input num" type="number" min="0" max="23" value="12" />
|
|
<span class="colon">:</span>
|
|
<input id="mm" class="input num" type="number" min="0" max="59" value="0" />
|
|
<span class="colon">:</span>
|
|
<input id="ss" class="input num" type="number" min="0" max="59" value="0" />
|
|
</div>
|
|
<button id="applyTime" class="btn">应用</button>
|
|
<button id="fillNow" class="btn btn-ghost">填入当前显示时间</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="field-label">流速倍率（可正、可负、可 0、可小数）</div>
|
|
<div class="row">
|
|
<input id="rate" class="input num wide-num" type="number" step="0.1" value="1" />
|
|
<button id="applyRate" class="btn">应用</button>
|
|
<button id="togglePause" class="btn btn-warn">暂停</button>
|
|
</div>
|
|
<div class="row wrap presets">
|
|
<button class="btn btn-chip" data-rate="-1">-1 倒转</button>
|
|
<button class="btn btn-chip" data-rate="-2">-2</button>
|
|
<button class="btn btn-chip" data-rate="0">0 暂停</button>
|
|
<button class="btn btn-chip" data-rate="0.5">0.5</button>
|
|
<button class="btn btn-chip" data-rate="1">1 正常</button>
|
|
<button class="btn btn-chip" data-rate="2">2</button>
|
|
<button class="btn btn-chip" data-rate="10">10</button>
|
|
<button class="btn btn-chip" data-rate="60">60</button>
|
|
</div>
|
|
<p class="hint">「暂停 / 继续」按钮等价于倍率 0 / 回到暂停前的那个倍率。倍率为负时时钟会一直往回走，不是卡住。</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="field-label">快进 / 快退（按当前显示时间整体平移，可与任意倍率叠加）</div>
|
|
<div class="row wrap">
|
|
<button class="btn btn-chip" data-delta="5000">+5 秒</button>
|
|
<button class="btn btn-chip" data-delta="60000">+1 分钟</button>
|
|
<button class="btn btn-chip" data-delta="300000">+5 分钟</button>
|
|
<button class="btn btn-chip" data-delta="600000">+10 分钟</button>
|
|
<button class="btn btn-chip" data-delta="1800000">+30 分钟</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="control.js"></script>
|
|
</body>
|
|
</html>
|