基于JS创建的一个带有进度倒计时的圆形时钟，它能直观地表示时间的流逝，该方法可计算小时、分钟和秒的时间百分比，动态的显示时间，可以在需要视觉效果和动态时钟显示的项目中使用它，能够直观地表示时间的进展，通过直观的界面帮助用户跟踪小时、分钟和秒。

下面展示如何创建带进度倒计时的圆形时钟

1.首先，创建一个 HTML 文件并设置基本结构。为时钟添加一个容器。

<svg viewBox="0 0 100 100">
	<g transform="scale(-1 1) rotate(-90 0 100)">
		<g fill="none" stroke="rgba(0,0,0,0.1)">
			<circle cx="50" cy="50" r="46" stroke-width="8" />
			<circle cx="50" cy="50" r="46" stroke-width="6" />
			<circle cx="50" cy="50" r="38" stroke-width="7" />
			<circle cx="50" cy="50" r="38" stroke-width="5" />
			<circle cx="50" cy="50" r="30" stroke-width="6" />
			<circle cx="50" cy="50" r="30" stroke-width="4" />
			<circle cx="50" cy="50" r="22" stroke-width="5" />
			<circle cx="50" cy="50" r="22" stroke-width="3" />
			<circle cx="50" cy="50" r="16" stroke-width="4" />
			<circle cx="50" cy="50" r="16" stroke-width="2" />
		</g>
		<g id="timeHere">
			<!-- time circles pasted here -->
		</g>
		/*这里仅展示部分示例代码，下载后查看完整版代码*/
	</g>
</svg>

2.使用 CSS 创建时钟和进度元素的样式。该代码提供了基本样式；您可以根据自己的设计偏好进行自定义。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
svg {
	max-height: 90vh;
	max-width: 90vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

3.最后，在 <script> 标记或外部 JS 文件之间添加以下 JavaScript 函数，以启用时钟功能。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
function getTimePercentages() {
	const now = new Date();
	const currentHour = now.getHours();
	const currentMinute = now.getMinutes();
	const currentSecond = now.getSeconds();
	// Calculate the remaining minutes in the hour
	const remainingMinutes = currentMinute;

	const hourPercentage = (currentHour / 24) * 100;
	const hour12Percentage = ((currentHour % 12) / 12) * 100;
	const minutePercentage = (currentMinute / 60) * 100;
	const secondPercentage = (currentSecond / 60) * 100;
	// Calculate the percentage of minutes left in the hour
	const minutesLeftPercentage = (remainingMinutes / 60) * 100;

	return {
		hour: hourPercentage,
		hour12: hour12Percentage,
		minute: minutePercentage,
		minutes: minutesLeftPercentage,
		second: secondPercentage
	};
}

本指南提供了使用 HTML、CSS 和 JavaScript 实现圆形时钟的基本方法。请根据具体项目要求自定义样式和功能。