AskaEth
9c7081b21d
一个用于演练/演示的桌面时钟工具：两个窗口 —— 控制窗口（普通）与时钟窗口（无边框、 可拖动、可拖边缘改大小，由控制窗口开与关）。 功能 - 两个窗口各自的「始终置顶」开关 - 显示样式：纯数字 / 圆形表盘，切换立即生效 - 实时设定时间（含「填入当前显示时间」） - 倍率：支持正数、负数（倒转）、0（暂停）、小数 - 暂停 / 继续（继续时回到暂停前的倍率，按钮文案会显示是几倍） - 快进五档：+5 秒 / +1 分钟 / +5 分钟 / +10 分钟 / +30 分钟 实现要点 - 走时是「基准时间 + 基准时刻 + 倍率」的锚点式模型（不累加、零漂移）； 倍率、暂停、倒转、快进因此是同一套机制的四个用法，互不打架 - 跳转动画做在「呈现时间」这一层：数字滚动与表盘指针扫动共用同一个中间值， 所以永远同步，也不会跨 12 点倒着转一圈 - 无边框窗口的拖动（CSS app-region + 控件 no-drag）与拖边缘改大小 （自己算几何 + IPC setBounds，因为 frame:false 下系统边缘命中不可靠） 测试 152 例：走时模型 / 改大小几何 / 呈现时间 / 两个渲染进程（DOM 桩）
48 lines
1.9 KiB
HTML
48 lines
1.9 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="clock.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<!-- stage 整体是拖动区；里面的按钮/角标再单独声明 no-drag，避免被拖动区吞掉点击 -->
|
||
<main id="stage" class="stage">
|
||
<div id="digitalView" class="view digital-view">
|
||
<div id="digitalTime" class="digital-time">00:00:00</div>
|
||
<div id="digitalDate" class="digital-date"></div>
|
||
</div>
|
||
|
||
<div id="analogView" class="view analog-view" hidden>
|
||
<svg id="dial" class="dial" viewBox="-100 -100 200 200" aria-hidden="true">
|
||
<circle class="dial-face" cx="0" cy="0" r="94"></circle>
|
||
<g id="ticks"></g>
|
||
<g id="numerals"></g>
|
||
<line id="hourHand" class="hand hand-hour" x1="0" y1="10" x2="0" y2="-50"></line>
|
||
<line id="minuteHand" class="hand hand-minute" x1="0" y1="14" x2="0" y2="-76"></line>
|
||
<line id="secondHand" class="hand hand-second" x1="0" y1="20" x2="0" y2="-86"></line>
|
||
<circle class="hand-cap" cx="0" cy="0" r="6"></circle>
|
||
</svg>
|
||
</div>
|
||
|
||
<div id="badge" class="badge" hidden></div>
|
||
<button id="closeBtn" class="close-btn" title="关闭时钟窗口">×</button>
|
||
</main>
|
||
|
||
<div class="rz rz-n" data-dir="n"></div>
|
||
<div class="rz rz-s" data-dir="s"></div>
|
||
<div class="rz rz-w" data-dir="w"></div>
|
||
<div class="rz rz-e" data-dir="e"></div>
|
||
<div class="rz rz-nw" data-dir="nw"></div>
|
||
<div class="rz rz-ne" data-dir="ne"></div>
|
||
<div class="rz rz-sw" data-dir="sw"></div>
|
||
<div class="rz rz-se" data-dir="se"></div>
|
||
|
||
<script src="resize.js"></script>
|
||
<script src="presented-time.js"></script>
|
||
<script src="clock.js"></script>
|
||
</body>
|
||
</html>
|