会议预定记录钟表盘展示功能怎么实现？-灵析社区
只想躺平 类似于图片这种效果，总共24个刻度。 某个时间段有会议，则显示图片中橙色部分的样式。 每场会议以30分钟为基本单位。 请各位大佬指教
努力的大名用 "svg"，"path" 绘制圆弧：
"localhost_5173_.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241124/36e4267be253fdcb49bd1cbc1f0d04ab.png)
import { Fragment } from "react";
import "./assets/app.scss";
const a = (n: number) => Array.from({ length: n });
export default function App() {
const r = 190,
d = new Date(),
x = (rad: number) => 250 + Math.sin(2 * Math.PI * rad) * r,
y = (rad: number) => 250 - Math.cos(2 * Math.PI * rad) * r,
times: [[number, number?], [number, number?]][] = [
[[8], [10]],
[[10], [11, 10]],
[[14], [15, 10]],
[[17], [19]],
];
return (
{times.map((t, i) => {
const w = 25,
d = w / 2 / (2 * Math.PI * r);
let [r1, r2] = t.map(
([a, b]: [number, number?]) => a / 24 + (b ?? 0) / (60 * 24)
);
r1 += d;
r2 -= d;
return (
);
})}
{a(8).map((_, i) => (
{i * 3}
))}
{a(24).map((_, i) =>
i % 3 ? (
) : (
)
)}
{d.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})}
{d.toLocaleDateString()}
);
}
#root {
svg {
background: #6a6a6a;
#main-circle {
stroke: #888888;
fill: transparent;
stroke-width: 25px;
}
.num,
#d,
#t {
fill: white;
font-family: sans-serif;
text-anchor: middle;
alignment-baseline: middle;
// translate: -50% -50%;
// font-size: 10px;
}
#t {
font-size: 40px;
}
#d {
font-size: 30px;
}
}
}