基于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 实现圆形时钟的基本方法。请根据具体项目要求自定义样式和功能。
